styled-components - how to set styles on html or body tag?
ReactjsStyled ComponentsJssReactjs Problem Overview
Ordinarily, when using pure CSS, I have a style sheet that contains:
html {
height: 100%;
}
body {
font-size: 14px;
}
When using styled-components in my React project, how do I set styles for the html or body tags? Do I maintain a separate CSS file just for this purpose?
Reactjs Solutions
Solution 1 - Reactjs
You can, of course, maintain a separate CSS file that you include in your HTML via a <link> tag.
For v4:
Use createGlobalStyle from Styled-components.
import { createGlobalStyle } from 'styled-components'
const GlobalStyle = createGlobalStyle`
body {
color: ${props => (props.whiteColor ? 'white' : 'black')};
}
`
<React.Fragment>
<GlobalStyle whiteColor />
<Navigation /> {/* example of other top-level stuff */}
</React.Fragment>
Pre v4:
Styled-components also exports an injectGlobal helper to inject global CSS from JavaScript:
import { injectGlobal } from 'styled-components';
injectGlobal`
html {
height: 100%;
width: 100%;
}
`
See the API documentation for more information!
Solution 2 - Reactjs
As of Oct, 2018.
> NOTE > > The injectGlobal API was removed and replaced by createGlobalStyle in > styled-components v4.
According to docs createGlobalStyle is
> A helper function to generate a special StyledComponent that handles global styles. Normally, styled components are automatically scoped to a local CSS class and therefore isolated from other components. In the case of createGlobalStyle, this limitation is removed and things like CSS resets or base stylesheets can be applied.
Example
import { createGlobalStyle } from 'styled-components'
const GlobalStyle = createGlobalStyle`
body {
color: ${props => (props.whiteColor ? 'white' : 'black')};
}
`
// later in your app
<React.Fragment>
<Navigation /> {/* example of other top-level stuff */}
<GlobalStyle whiteColor />
</React.Fragment>
Read more on official docs.
Solution 3 - Reactjs
If you use material-UI, then you do not need styled-components to achieve this. You can simply override the default background set in your theme.js file:
overrides: {
palette: {
background: {
default: "#fff"
}
}
}
Then you just have to wrap your root component in the Material-UI CssBaseLine component:
<MuiThemeProvider theme={muiTheme}>
<CssBaseline />
<App />
</MuiThemeProvider>
That baseline components sets the default background on the <body> element.
Also have look at this issue: https://github.com/mui-org/material-ui/issues/10764