Comment utiliser l'attribut de style dans React

Supposons que vous utilisez actuellement tout le potentiel de vent arrière, et peut-être avez-vous également utilisé des éléments de vent arrière et simplement copié-collé des composants prédéfinis. Je le fais aussi la plupart du temps, mais il y a des moments où nous… ne pouvons pas simplement appuyer sur CTRL+C et CTRL+V.

Rencontrez l'attribut de style, vous le trouverez souvent dans le vent arrière en particulier, qui est essentiellement comme un paramètre supplémentaire requis pour vos composants en dehors du style en ligne sur className.

Habituellement, le style est utilisé pour ajouter une couleur d'arrière-plan, une image d'arrière-plan, etc. Vous pouvez en savoir plus sur la documentation officielle de Tailwind.https://tailwindcss.com/docs/background-attachment

C'est à quoi ça ressemble normalement.

Maintenant, si nous copions et collons simplement le code, cela générera une erreur comme celle-ci.

Cela nécessite un ajustement supplémentaire pour le style, ce qui, sans surprise, a également été expliqué dans le document de réaction, mais pour une raison quelconque, il l'a peut-être manqué, tout comme moi.https://reactjs.org/docs/dom-elements.html#style

Donc TLDR, nous ne pouvons pas simplement utiliser un trait d'union comme couleur d'arrière-plan, nous devons le changer en camelCased en backgroundColor.

background-color à BackgroundColor,

background-position à backgroundPosition

image d'arrière-plan à image d'arrière-plan

et pas seulement cela, nous devons également supprimer les guillemets encapsulant tout le style, les remplacer par des accolades doubles et mettre la valeur entre guillemets, comme ceci.

C'est ça! Nous n'avons rien d'autre à faire. Maintenant, le code fonctionnera parfaitement. Voici à quoi cela ressemble sur mon projet maintenant, tout simplement en copiant et en collant le code des éléments tailwind. (je le recommande vraiment,https://tailwind-elements.com/)

S'amuser! Merci d'avoir lu!