So verwenden Sie das Stilattribut in React

Angenommen, Sie nutzen derzeit das volle Potenzial von Rückenwind, und vielleicht haben Sie auch Rückenwindelemente verwendet, und kopieren Sie einfach vorgefertigte Komponenten. Ich mache das auch meistens, aber es gibt Momente, in denen wir … nicht einfach STRG+C und STRG+V drücken können.

Treffen Sie das Stilattribut, Sie werden dies besonders oft im Rückenwind finden, was im Grunde wie eine zusätzliche Einstellung ist, die für Ihre Komponenten neben dem Inline-Styling auf className erforderlich ist.

Normalerweise wird Stil verwendet, um Hintergrundfarbe, Hintergrundbild usw. hinzuzufügen. Weitere Informationen finden Sie in der offiziellen Rückenwind-Dokumentation.https://tailwindcss.com/docs/background-attachment

So sieht es normalerweise aus.

Wenn wir jetzt einfach den Code kopieren und einfügen, wird ein Fehler wie dieser ausgegeben.

Es erfordert eine zusätzliche Anpassung des Stils, was nicht überraschend auch im Reaktionsdokument erklärt wurde, aber aus irgendeinem Grund vielleicht genau wie ich übersehen wurde.https://reactjs.org/docs/dom-elements.html#style

Also TLDR, wir können nicht einfach hypen wie background-color verwenden, wir müssen es zu camelCased in backgroundColor ändern.

Hintergrundfarbe zu BackgroundColor,

background-position zu backgroundPosition

Hintergrundbild zu backgroundImage

und nicht nur das, wir müssen auch das Anführungszeichen entfernen, das den gesamten Stil enthält, es durch doppelte geschweifte Klammern ersetzen und den Wert wie hier in Anführungszeichen setzen.

Das ist es! Wir brauchen nichts weiter zu tun. Jetzt funktioniert der Code perfekt. So sieht es jetzt in meinem Projekt aus, alles nur durch Kopieren und Einfügen des Codes von Rückenwindelementen. (Ich kann es wirklich empfehlen,https://tailwind-elements.com/)

Habe Spaß! Danke fürs Lesen!