para isso, existe uma função do pŕoprio styled-components
para a criação de estados globais da aplicação. A createGlobalStyle
.
// globalStyles.js
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
background-color: #fff;
}
`;
export default GlobalStyle;
A função retorna um componente que deve ser utilizado na sua aplicação, geralmente no componente mais global possível. Ou seja, no (caso tenha utilizado o Create React App, é claro).
// App.js
import React from 'react';
import GlobalStyle from './ui/globalStyle';
import Content from './components/Content';
function App() {
return (
<>
<GlobalStyle />
<Content />
</>
);
}
export default App;
Ao utilizar esse "estilo global", o css será aplicado em sua aplicação.