Variaveis css

Fala Delano, tudo bem?

Sim, é possivel criar uma váriavel css nos estilos globais e utilizar durante o projeto, porém para esses casos que você for utilizar váriaveis no styled component, eu recomendo utilizar o Theme do styled components, que fica responsável por fornecer valores para o seus estilos, então usaremos ele para fornecer esses valores que nessa caso pode ser as nossas variáveis, para utilizar o Theme é necessário importar um componente próprio do styled components chamado ThemeProvider que será o provedor dos valores para qualquer componente filho (recomendo importar no maior nivel da sua aplicação, como por exemplo o App.js, para que possa fornecer esses valores para qualquer componente):

import  { ThemeProvider  } from 'styled-components';

function App() {
        return (
                <ThemeProvider>

                </ThemeProvider>
        )
}

E esse componente, espera receber um atributo chamado theme que será os valores que serão fornecidos aos nossos componentes, e como valor desse atributo passamos o que queremos que os nossos componentes do styled components tenha acesso:

import  { ThemeProvider  } from 'styled-components';

function App() {
        return (
                <ThemeProvider theme={primaryColor = '#fff'}>

                </ThemeProvider>
        )
}

Nesse caso passamos como valor desse theme, um valor chamado primaryColor que é uma váriavel com o valor #fff, esse é um exemplo do que podemos passar, mas normalmente criamos um objeto que contenha todas as nossas "variáveis", veja um exemplo:

import  { ThemeProvider  } from 'styled-components';

function App() {

        const tema = {
                colors: {
                        primaryColor: '#fff',
                        contrastColor: '#000'
                } 
        } //Aqui criamos um objeto com nome qualquer que possui as nossas cores que poderiamos usar durante toda nossa aplicação

        return (
                <ThemeProvider theme={tema}> //Aqui eu passo esse objeto como valor para o nosso ThemeProvider

                </ThemeProvider>
        )
}

Certo, agora temos o nosso objeto com as nossas cores, mas como poder utilizar isso nos nossos componentes do styled components? Simples, nos nossos componentes do styled components nós podemos utilizar funções JavaScript utilizando ${} e dentro dessas chaves inserindo a nossa função ou qualquer coisa de JavaScript, então, quando utilizamos uma função desse modo no nosso styled components, ela automáticamente recebe algumas props, e nessas props, além das props que podemos passar diretamente para o componente, nós recebemos uma prop chamada theme que adivinha? É aonde fica os valores que passamos para o nosso ThemeProvider, assim podemos utilizar da forma que preferirmos, veja um exemplo:

import styled from 'styled-components';

const Titulo = styled.h1`
        font-size: 32px;
        color: ${function (props) {  return props.theme.colors.primaryColor } };  // **
`;

export default Titulo;

Na linha acima marcado com asterisco, nós criamos uma função que recebe essas nossas props, e acessamos nessas props o theme que recebemos do ThemeProvider, então agora como criamos um objeto, estou acessando normalmente as propriedades que criei no objeto tema, e retornando a cor primaria que definimos no objeto

Obs: Para que seja possivel ter acesso aos valores que passamos para o theme do ThemeProvider, é necessário que aquele componente seja filho do ThemeProvider e seja um componente criado através do styled component.

Viu como é simples? E essa é uma maneira escalável, você pode difinir o que quiser para utilizar nos seus estilos, seja tamanho de fonte, cor, tipografia, etc... Clicando aqui você tem acesso a documentação do styled components explicando sobre essa funcionalidade.

Espero ter ajudado, bons estudos :D