Solucionado
Na página CSS de uma página que estou criando usando React.JS tenho o seguinte código:
:root{
--background-color:#25283D;
--main-color:#E85F5C;
--button-color:#23967F;
--text-color:#FFFEFF;
}
*{
cursor: default;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
Agora quero estilizar usando Styled Components ao invés das páginas CSS, mas não sei como ou para qual página passar esse código para poder usar as variáveis ao longo do projeto.
Oi, Bruno! Tudo bem?
Que legal que você está explorando o uso de Styled Components no seu projeto React! Styled Components é uma ótima ferramenta para estilizar componentes de forma mais modular e dinâmica.
Para usar seu CSS global com Styled Components, você pode seguir esses passos:
Defina as variáveis globais: você pode definir seu estilo global em um arquivo separado (por exemplo, GlobalStyles.js) usando o createGlobalStyle do Styled Components.
Aplique os estilos nos seus componentes: depois de definir os estilos globais, você pode importar no App e reaproveitar em toda a aplicação.
Para ter uma referência de como fazer esse processo, recomendo a leitura desse artigo.
Espero ter ajudado. Um abraço!