Cómo usar el atributo de estilo en React

Digamos que actualmente está utilizando todo el potencial del viento de cola, y quizás también usó elementos de viento de cola y simplemente copió y pegó componentes prefabricados. Yo también hago eso la mayor parte del tiempo, pero hay momentos en los que... no podemos simplemente presionar CTRL+C y CTRL+V.

Conozca el atributo de estilo, encontrará esto a menudo especialmente en el viento de cola, que es básicamente como una configuración adicional requerida para sus componentes además del estilo en línea en className.

Por lo general, el estilo se usa para agregar color de fondo, imagen de fondo, etc. Puede encontrar más información en la documentación oficial de Tailwind.https://tailwindcss.com/docs/background-attachment

Así es como se ve normalmente.

Ahora, si solo copiamos y pegamos el código, arrojará un error como este.

Requiere un ajuste adicional para el estilo, que, como era de esperar, también se explicó en el documento de reacción, pero por alguna razón tal vez se lo perdió al igual que a mí.https://reactjs.org/docs/dom-elements.html#style

Entonces, TLDR, no podemos simplemente usar hypen como background-color, debemos cambiarlo a camelCased en backgroundColor.

color de fondo a BackgroundColor,

posición de fondo a posición de fondo

imagen de fondo a imagen de fondo

y no solo eso, también debemos eliminar las comillas que encapsulan todo el estilo, reemplazarlas con llaves dobles y poner el valor entre comillas, así.

¡Eso es! No necesitamos hacer nada más. Ahora el código funcionará perfectamente. Así es como se ve en mi proyecto ahora, todo simplemente copiando y pegando el código de los elementos de viento de cola. (Realmente lo recomiendo,https://tailwind-elements.com/)

¡Que te diviertas! ¡Gracias por leer!