1
resposta

[Sugestão] Passar as cores para o CSS do componente React

Você pode passar a informação de cores através de uma variável css, utilizando -- seguido de um nome com por exemplo --cor: #F233A1. Você consegue através de uma propriedade style enviar uma variável para o arquivo CSS, no React ficaria assim, style={{'--cor': props.cor}}, então o componente ficaria assim.

import './Time.css'

const Time = (props) => {
    return (
        <section className="time" style={{'--corSecundaria': props.corSecundaria}}>
            <h3 style={{'--corPrimaria': props.corPrimaria}}>{props.nome}</h3>
        </section>
    )
}

export default Time

Com isso você poderia utilizar a cor para um after por exmplo, ou pra vária propriedades do css.

Espero que gostem da dica!

1 resposta

Olá Lauro, obrigado por compartilhar essa dica com a comunidade! Realmente é uma ótima forma de passar informações de cores para o CSS do componente React. Além disso, é uma forma bem organizada e escalável de trabalhar com cores em projetos maiores.

É importante ressaltar que essa técnica pode ser utilizada em outras propriedades do CSS, não só em cores. Por exemplo, você pode utilizar essa técnica para passar informações de tamanho de fonte, espaçamento, entre outras propriedades.

Espero ter ajudado e bons estudos!