styled components - passing props to GlobalStyle

user_5016744 0
Viewed 1472

I have GlobalStyle with some overwrites like:

const GlobalStyle = createGlobalStyle`
  h6 {
    font-weight: ${props => (props.semibold ? 600 : "bold")};
    font-size: 16px;
  }
  ...
`;

I would like to pass props from my components to GlobalStyle for eg. weight. Something like this (from JSX):

const LocalComponent = () => {
  return (
    <div>
      <h6 semibold>This should be semi-bold text</h6>
    </div>
  );
};

above example doesn't work ofc. But is there a way to achieve this?
Currently I'm wrapping h6 into another SC, and adding font-weight locally. It would be much better to have it on global scale without need to create another component just as a wrapper for bold text etc.

styled-components reactjs
1 Answers

Based on the above information, it isn't clear what part is missing.

I am presuming you have added the <ThemeProvider theme={your_theme} /> as a wrapper around your application (e.g. <App />) This will inject props into all of your styled-components if they are children of <App />.

  <ThemeProvider theme={your_theme}>
     <GlobalStyle />
     <App />
  </ThemeProvider>

Don't forget to add your <GlobalStyle /> component as a child to the ThemeProvider, or the props will not populate.

user_146042740
Related