Como usar o atributo Style no React

Digamos que você esteja utilizando todo o potencial do vento de cauda e talvez também tenha usado elementos de vento de cauda e apenas copie e cole componentes pré-fabricados. Eu também faço isso na maioria das vezes, mas há momentos em que não podemos simplesmente pressionar CTRL+C e CTRL+V.

Conheça o atributo de estilo, você encontrará isso com frequência especialmente no tailwind, que é basicamente uma configuração adicional necessária para seus componentes, além do estilo embutido em className.

Normalmente, o estilo é usado para adicionar cor de fundo, imagem de fundo, etc. Você pode encontrar mais informações na documentação oficial do tailwind.https://tailwindcss.com/docs/background-attachment

É assim que parece normalmente.

Agora, se apenas copiarmos e colarmos o código, ele lançará um erro como este.

Requer ajuste adicional de estilo, o que sem surpresa também foi explicado no documento de reação, mas por algum motivo talvez tenha perdido assim como eu.https://reactjs.org/docs/dom-elements.html#style

Portanto, TLDR, não podemos simplesmente usar hypen como background-color, precisamos alterá-lo para camelCased em backgroundColor.

background-color para BackgroundColor,

background-position para backgroundPosition

background-image para backgroundImage

e não apenas isso, também precisamos remover aspas que encapsulam todo o estilo, substituí-las por chaves duplas e colocar o valor entre aspas, assim.

É isso! Não precisamos fazer mais nada. Agora o código funcionará perfeitamente. É assim que parece no meu projeto agora, tudo apenas copiando e colando o código dos elementos tailwind. (eu realmente recomendo,https://tailwind-elements.com/)

Divirta-se! Obrigado por ler!