Normalmente, cuando uso CSS puro, tengo una hoja de estilo que contiene:
html { height: 100%; } body { font-size: 14px; } Cuando uso styled-components en mi proyecto React, ¿cómo configuro estilos para las etiquetas html o body ? ¿Mantengo un archivo CSS separado solo para este propósito?
Por supuesto, puede mantener un archivo CSS separado que incluya en su HTML a través de una etiqueta <link> .
v4 :Use createGlobalStyle de 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>v4 : Styled-components también exporta un asistente injectGlobal para inyectar CSS global desde JavaScript:
import { injectGlobal } from 'styled-components'; injectGlobal` html { height: 100%; width: 100%; } `Consulte la documentación de la API para obtener más información.
A octubre de 2018.
NOTA
La API injectGlobal se eliminó y se reemplazó por createGlobalStyle en styled-components v4.
Según documentos createGlobalStyle es
Una función auxiliar para generar un StyledComponent especial que maneja estilos globales. Normalmente, los componentes con estilo se limitan automáticamente a una clase CSS local y, por lo tanto, se aíslan de otros componentes. En el caso de createGlobalStyle, esta limitación se elimina y se pueden aplicar cosas como reinicios de CSS u hojas de estilo base.
Ejemplo
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>Lea más en los documentos oficiales .
Si usa material-UI, entonces no necesita styled-components para lograr esto. Simplemente puede anular el conjunto de fondo predeterminado en su archivo theme.js:
overrides: { palette: { background: { default: "#fff" } } }Luego, solo tiene que envolver su componente raíz en el componente Material-UI CssBaseLine :
<MuiThemeProvider theme={muiTheme}> <CssBaseline /> <App /> </MuiThemeProvider> Esos componentes de línea de base establecen el fondo predeterminado en el elemento <body> .
También eche un vistazo a este problema: https://github.com/mui-org/material-ui/issues/10764