theme not passing to all Grid,Rows,Col as desired...

[robertschank]

desired outcome:

All descendents of <ThemeProvider/> which are Grid, Rows and Cols take config from theme in the index.js file

actual behavior:

default gutterwidth and outerMargin are passed unless theme is directly called.

So we are presently passing theme over and over again down the app.... (see portion of code below)

What could I/we do differently to get the desired outcome?

in our /index.js

const theme = {
  flexboxgrid: {
    gutterWidth: 0,
    outerMargin: 0,
    breakpoints: {
      xs: 0,  // em
      sm: 48, // em
      md: 64, // em
      lg: 75 // em
    }
  }
};

render(
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  , document.getElementById('root'));

in our App.js lots of props passing using Styled-Components withTheme(Component)

class App extends React.Component {
  componentWillMount() {
    this.props.fetchConfig();
  }

  render() {
    return (
      <Grid fluid theme={this.props.theme}>
        <Row theme={this.props.theme}>
          <Col xs={12} theme={this.props.theme}><Header /></Col>
        </Row>
        <Row theme={this.props.theme}>
          <Col xs={12} theme={this.props.theme}>
            <Route component={CatchAllComponent} />
            <Route path="/login" component={LoginComponent} />
            <Route path="/forgotPassword" component={ForgotPassword} />
          </Col>
        </Row>
        <Row theme={this.props.theme}>
          <Col xs={12} theme={this.props.theme}><Footer /></Col>
        </Row>
      </Grid>
    );
  }
}
export default (withTheme(App));

just to explain the madness; it continues to each child component this is login/index.js

    return (
      <MainSection theme={this.props.theme}>
        <LoginContainer>
          <LoginFieldRow>
            <Col xs={12}>
              <LoginTitle>
                Please Sign In
              </LoginTitle>
            </Col>
          </LoginFieldRow>
          <LoginFieldRow>
            {this.handleErrorCase()}
            {this.hasAuthKeys()}

            <Col xs={12}>
              <TextField
                type="text"
                label="Your Email Address"
                value={this.state.email}
                onChange={this.emailOnChange}
              />
            </Col>
          </LoginFieldRow>
          <LoginFieldRow>
            <Col xs={12}>
              <TextField
                type="password"
                label="Password"
                value={this.state.password}
                onChange={this.passwordOnChange}
              />
            </Col>
          </LoginFieldRow>
          <LoginButtonRow>
            <Col xs={12}>
              <LoginButton type="primary" onClick={this.loginHandler}>
                Sign In
              </LoginButton>
            </Col>
          </LoginButtonRow>
          <LoginLinkRow>
            <LinkDiv>
              <Link to="/forgotPassword">Forgot your password?</Link>
            </LinkDiv>
            <LinkDiv>
              <Link to="/login">Not a member?</Link>
            </LinkDiv>
          </LoginLinkRow>
        </LoginContainer>
        <ContactMessage />
      </MainSection>
    );
  }
}

We'd need to continue with all of <CatchAll /> and its <Childrens />

blah

May be related to:

https://github.com/LoicMahieu/react-styled-flexboxgrid/issues/84 https://github.com/LoicMahieu/react-styled-flexboxgrid/issues/19

[misund]

I cannot reproduce your issue with gutterWidth.

In shiny, we're using a patched version of the Grid component to fix #19, but use Row and Col as provided - that works as expected, without wrapping our App component in withTheme, and without passing the theme around manually.

Here's our Grid story. Switch between the "Default" and "Oppskrift" themes in the top navigation bar to see that the gutterWidth changes dynamically.

[misund]

Here's our modified Grid component

[misund]

Do you still have issues after #87 was merged?

[kevryan2]

@misund I'm experiencing this issue currently on the latest version - unless I place theme={theme} on every single child row and column (where theme = the provided example theme object in the Readme), the props of theme.flexboxgrid.gutterWidth and theme.flexboxgrid.outerMargin don't actually get read or used. This includes if I use container="fluid". If I place theme on every single <Col></Col>, it all works.