Jak używać atrybutu stylu w React

Załóżmy, że obecnie wykorzystujesz pełny potencjał tylnego wiatru i być może użyłeś również elementów tylnego wiatru i po prostu skopiowałeś i wkleiłeś gotowe komponenty. Ja też to robię przez większość czasu, ale są chwile, w których… nie możemy po prostu nacisnąć CTRL+C i CTRL+V.

Atrybut stylu Meet, znajdziesz go często, szczególnie w przypadku tylnego wiatru, który jest zasadniczo jak dodatkowe ustawienie wymagane dla twoich komponentów oprócz stylu wbudowanego w className.

Zwykle styl jest używany do dodawania koloru tła, obrazu tła itp. Więcej informacji można znaleźć w oficjalnej dokumentacji dotyczącej tylnego wiatru.https://tailwindcss.com/docs/background-attachment

Tak to wygląda normalnie.

Teraz, jeśli po prostu skopiujemy i wkleimy kod, wyświetli się taki błąd.

Wymaga dodatkowej korekty stylu, co, jak można było się spodziewać, wyjaśniono również w dokumencie dotyczącym reakcji, ale z jakiegoś powodu być może pominięto to, tak jak ja.https://reactjs.org/docs/dom-elements.html#style

Więc TLDR, nie możemy po prostu użyć myślnika jak koloru tła, musimy zmienić go na camelCased na backgroundColor.

kolor tła na kolor tła,

background-position na backgroundPosition

obraz tła na obraz tła

i nie tylko to, musimy również usunąć cytat obejmujący cały styl, zastąpić go podwójnymi nawiasami klamrowymi i umieścić wartość w cudzysłowie, tak jak tutaj.

Otóż ​​to! Nie musimy robić nic więcej. Teraz kod będzie działał idealnie. Tak to wygląda teraz w moim projekcie, wszystko po prostu przez skopiowanie i wklejenie kodu z elementów tailwind. (naprawdę polecamhttps://tailwind-elements.com/)

Baw się dobrze! Dziękuje za przeczytanie!