react-foundation-components icon indicating copy to clipboard operation
react-foundation-components copied to clipboard

How do you reset the max-width for .row class without editing the node_module foundation-sites/scss?

Open guntherkoo opened this issue 8 years ago • 1 comments

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!

guntherkoo avatar Apr 24 '17 20:04 guntherkoo

Are you using CSS modules to import the components? If so couple of options:

  1. 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"
}
  1. Inline styles
<Row style={{ maxWidth: '80rem' }}>...</Row>
  1. 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>

aruberto avatar Apr 24 '17 21:04 aruberto