react-foundation-components
react-foundation-components copied to clipboard
How do you reset the max-width for .row class without editing the node_module foundation-sites/scss?
I'm trying to figure out how can I set the row max-width without having to edit the node_module/foundation-sites/scss file.. any ideas? I don't want to have to add a new class to my own scss file with row max-width !important.
Thank you so much!
Are you using CSS modules to import the components? If so couple of options:
- I believe the max-width is controlled by the $grid-row-width variable. Following this example webpack loader setup, you can define scss variables in a json file to override foundation defaults
{
"grid-row-width": "80rem"
}
- Inline styles
<Row style={{ maxWidth: '80rem' }}>...</Row>
- CSS
// styles.css
.row {
max-width: 80rem
}
import Row from '...'; // this will import foundation sites row css first
import styles from './styles.css' // this will import your css second so it should have higher precedence
<Row className={styles.row}>...</Row>