Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Cor dinâmica com no react

Olá pessoal, Alguém poderia me ajudar com uma dúvida?

Eu gostaria de saber como eu poderia fazer para permitir que o usuário escolha a cor de um elemento a partir da cor que ele selecionar no campo input do tipo color?

Captura o valor do input eu sei, o problema é que não estou conseguindo pensar em como usar o valor capturado para alterar a propriedade background-color do módulo css.

Obrigado pela ajuda.

2 respostas
solução!

Fala Bruno, beleza?

Você tem algumas possibilidades, vou te dar duas aqui:

  • Com CSS Modules, você pode colocar direto no inline style do componente:
    <p style={{ color: colorState }}> //colorState é o estado que você está guardando a cor
        texto com a cor diferente!
    <p>
  • Sem CSS Modules, você pode usar bibliotecas como emotion ou styled-components pra colocar essa cor:
const ParagrafoEstilizado = styled.p`
    color: ${props => props.cor}
`

...
<ParagrafoEstilizado cor={colorState}>
    texto com a cor diferente!
</ParagrafoEstilizado>

Respondi sua dúvida? Caso tenha mais alguma sinta-se a vontade para continuar este tópico ou criar outro beleza?

Bons estudos!

Obrigado pela ajuda!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software