Come utilizzare l'attributo di stile in React

Supponiamo che tu stia attualmente sfruttando tutto il potenziale del vento in coda e forse hai anche utilizzato elementi del vento in coda e hai semplicemente copiato incollando i componenti predefiniti. Lo faccio anch'io la maggior parte del tempo, ma ci sono momenti in cui... non possiamo semplicemente premere CTRL+C e CTRL+V.

Incontra l'attributo di stile, lo troverai spesso soprattutto in tailwind, che è fondamentalmente come un'impostazione aggiuntiva richiesta per i tuoi componenti oltre allo stile inline su className.

Di solito lo stile viene utilizzato per aggiungere background-color, background-image, ecc. Puoi trovare ulteriori informazioni sulla documentazione ufficiale di tailwind.https://tailwindcss.com/docs/background-attachment

Ecco come appare normalmente.

Ora, se copiamo e incolliamo semplicemente il codice, genererà un errore come questo.

Richiede un ulteriore aggiustamento per lo stile, che ovviamente è stato spiegato anche nel documento di reazione, ma per qualche motivo forse l'ha perso proprio come me.https://reactjs.org/docs/dom-elements.html#style

Quindi TLDR, non possiamo semplicemente usare hypen come background-color, dobbiamo cambiarlo in camelCased in backgroundColor.

background-color in BackgroundColor,

background-position a backgroundPosition

background-image a backgroundImage

e non solo, dobbiamo anche rimuovere le virgolette che incapsulano tutto lo stile, sostituirle con doppie parentesi graffe e inserire il valore tra virgolette, in questo modo.

Questo è tutto! Non abbiamo bisogno di fare nient'altro. Ora il codice funzionerà perfettamente. Ecco come appare ora nel mio progetto, tutto semplicemente copiando e incollando il codice dagli elementi tailwind. (lo consiglio davvero,https://tailwind-elements.com/)

Divertiti! Grazie per aver letto!