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.

Widzisz, o którym obecnie mówię?

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.

wszystko wewnątrz atrybutu style jest ujęte w cudzysłów i to wszystko.

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

Styl nie zostanie zaakceptowany, jeśli nie będzie wypełniony wartościami, a nie tylko ciągiem znaków.

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.

Czy widzisz? teraz możemy poprawnie używać stylu.

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!

Suggested posts

Unikanie niszczycielskich konsekwencji udaru mózgu: nauka z rodzinnej podróży.

Unikanie niszczycielskich konsekwencji udaru mózgu: nauka z rodzinnej podróży.

Wstęp Udar to nagły przypadek medyczny, który może dotknąć każdego w dowolnym momencie. Występuje, gdy przepływ krwi do części mózgu zostaje zakłócony, co prowadzi do nagłej utraty funkcji mózgu.

Moje najczęściej używane zasoby dotyczące kodowania

Moje najczęściej używane zasoby dotyczące kodowania

W tym tygodniu otrzymałem wiadomość e-mail od członka codziennej listy e-mailowej. Chcieli wiedzieć: Jakie zasoby odwiedzasz codziennie, co tydzień i co miesiąc? Świetne pytanie! Cieszę się, że mogę podzielić się spostrzeżeniami na temat mojego przepływu pracy i najlepszych zasobów, z których korzystam.

Related posts

3 sprawdzone sposoby na poprawę umiejętności pisania

Korzyści płynące z pisania i strategie, które Ci w tym pomogą

3 sprawdzone sposoby na poprawę umiejętności pisania

W 2022 roku, wraz z wydaniem GPT-3, umiejętność pisania wydaje się tracić na znaczeniu. Dzięki sztucznej inteligencji osoby o słabym pisaniu mogą również generować wysokiej jakości personel.

Wyzwanie czytelnicze Goodreads jest toksyczne

Wyzwanie czytelnicze Goodreads jest toksyczne

Swędzenie w mojej dłoni rozszerzyło się, gdy targowałem się z miejscowym księgarzem o kolejną książkę. Ta książka, podobnie jak pozostałe, które ostatnio kupiłem, znalazłaby swój tron ​​na moim stosie „Do przeczytania” (TBR); a mimo to kupiłem.

Dziennik Ouvert

Dziennik Ouvert

Otwórz pamiętnik: zdjęcie dziennie . Zawsze fascynowały mnie opowieści.

Występ solowy rudowłosej dziewczyny

Na zlecenie Haydena Katie filmuje swoją masturbację.

Występ solowy rudowłosej dziewczyny

Było już po północy, kiedy Hayden odwiózł Katie do jej akademika po wspólnym wieczorze. Miała wcześnie rano zajęcia i nie miała kolejnej zmiany ubrania po tym, jak spędziła z nim noc wcześniej.