Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Używając React, typowe jest zapisywanie stylów w globalnym pliku CSS. Może to utrudnić zlokalizowanie stylów dla określonych komponentów, zwłaszcza podczas pracy nad dużym projektem. W przypadku komponentów stylizowanych znalezienie stylu dla określonego komponentu jest łatwe, ponieważ znajdują się one w tym samym pliku co komponent.

Zobaczmy, jak skonfigurować i zintegrować stylizowane komponenty w aplikacji React.

Instalowanie biblioteki stylizowanych komponentów

Możesz zainstalować stylizowane komponenty, uruchamiając to polecenie w swoim terminalu:

npm i styled-components

Aby zainstalować stylizowane komponenty przy użyciu przędzy, uruchom:

przędza dodaje stylizowane komponenty

Tworzenie stylizowanego komponentu

Stylizowany komponent jest taki sam jak standardowy komponent React, ze stylami. Są różne wady i zalety elementów stylizowanych, które należy wziąć pod uwagę przy prawidłowym użytkowaniu.

instagram viewer

Ogólna składnia wygląda następująco:

import stylizowany z„stylizowane komponenty”;

konst ComponentName = stylizowany. DOMElementTag`
 cssWłaściwość: cssValue
`

Tutaj importujesz stylizowany od stylizowany komponent biblioteka. The stylizowany function to wewnętrzna metoda, która konwertuje kod JavaScript na rzeczywisty CSS. The Nazwa składnika jest nazwą stylizowanego komponentu. The DOMElementTag to element HTML/JSX, który zamierzasz stylizować, taki jak div, span, button itp.

Aby utworzyć stylizowany przycisk przy użyciu stylizowanego komponentu, należy najpierw utworzyć komponent React zawierający element przycisku.

jak tak:

import Reagować z"reagować";
funkcjonowaćPrzycisk() {
powrót (

Teraz możesz utworzyć styl dla przycisku za pomocą stylizowanych komponentów:

import stylizowany z„stylizowane komponenty”;
konst Stylizowany przycisk = stylizowany przycisk`
 wyściółka: 1Rem 0.8rem;
 promień granicy: 15piks;
 kolor tła: szary;
 kolor: #FFFFFF;
 rozmiar czcionki: 15piks;
`

Składając wszystko razem, będziesz musiał wymienić przycisk oznacz z stylizowany przycisk część:

import stylizowany z„stylizowane komponenty”;
import Reagować z"reagować";
konst Stylizowany przycisk = stylizowany przycisk`
 wyściółka: 1Rem 0.8rem;
 promień granicy: 15piks;
 kolor tła: szary;
 kolor: #FFFFFF;
 rozmiar czcionki: 15piks;
`
funkcjonowaćPrzycisk() {
powrót (
Witamy!!!</StyledButton>
 )
}

Style zagnieżdżania

Style można również zagnieżdżać podczas pracy z komponentami stylizowanymi. Zagnieżdżanie stylizowanych komponentów jest trochę podobne przy użyciu języka rozszerzeń SASS/SCSS. Możesz zagnieżdżać style, jeśli komponent zawiera wiele znaczników elementów i chcesz stylizować każdy znacznik indywidualnie.

Na przykład:

import Reagować z'reagować';
funkcjonowaćAplikacja() {
powrót (


Stylizowane komponenty</h1>




Witamy w stylizowanych komponentach</p>
 </div>
 )
}

Ten kod tworzy komponent zawierający plik h1 pierwiastek i A P element.

Możesz nadać styl tym elementom za pomocą zagnieżdżonej funkcji stylu stylizowanych komponentów:

import Reagować z'reagować';
import stylizowany z„stylizowane komponenty”;
konst StyledApp = styled.div`
 kolor: #333333;
 wyrównanie tekstu: środek;


 h1 {
 rozmiar czcionki: 32piks;
 styl czcionki: kursywa;
 grubość czcionki: pogrubiona;
 odstępy między literami: 1.2rem;
 transformacja tekstu: wielkie litery; 
 }


 P {
 początek bloku marginesu: 1rem;
 rozmiar czcionki: 18piks;
 }
`
funkcjonowaćAplikacja() {
powrót (

Stylizowane komponenty</h1>




Witamy w stylizowanych komponentach</p>
 </StyledApp>
 )
}

Ten kod używa stylizowanego składnika i zagnieżdża style dla h1 I P tagi.

Tworzenie i używanie zmiennych

Możliwość tworzenia zmiennych to niezwykła cecha biblioteki styled-components. Ta zdolność umożliwia dynamiczne stylizowanie, w którym można używać zmiennych JavaScript do określania stylów.

Aby użyć zmiennych w stylizowanych komponentach, utwórz zmienną i przypisz do niej wartość właściwości CSS. Następnie możesz użyć tej zmiennej bezpośrednio w CSS, na przykład:

import stylizowany z„stylizowane komponenty”;
konst Kolor główny = "czerwony";


konst Nagłówek = styled.h1`
 kolor: ${MainColor};
`;
funkcjonowaćAplikacja() {
powrót (
 <>
Witaj świecie!</Heading>
 </>
 );
}

W powyższym bloku kodu tekst „Witaj świecie!” wyświetli się w kolorze czerwonym.

Zauważ, że w tym przykładzie po prostu użyto standardowej zmiennej JavaScript w literale szablonu w połączeniu ze stylizowanym komponentem. To inne podejście niż za pomocą zmiennych CSS.

Rozszerzanie stylów

Po utworzeniu stylizowanego komponentu będziesz go używać. W niektórych sytuacjach możesz chcieć wprowadzić subtelne różnice lub dodać więcej stylizacji. W takich przypadkach można rozszerzyć style.

Aby rozszerzyć style, opakuj stylizowany komponent w stylizowany() konstruktora, a następnie dołącz wszelkie dodatkowe style.

W tym przykładzie Główny przycisk składnik dziedziczy styl składnika Przycisk i dodaje inny kolor tła — niebieski.

import stylizowany z„stylizowane komponenty”;
import Reagować z"reagować";
konst Przycisk = stylizowany przycisk`
 wyściółka: 1Rem 0.8rem;
 promień granicy: 15piks;
 kolor tła: szary;
 kolor: #FFFFFF;
 rozmiar czcionki: 15piks;
`


konst PrimaryButton = stylizowany (przycisk)`
 kolor tła: niebieski;
`
funkcjonowaćAplikacja() {
powrót (

Możesz także zmienić znacznik renderowany przez stylizowany komponent za pomocą Jak rekwizyt.

The Jak prop umożliwia określenie bazowego elementu HTML/JSX, jako który stylizowany komponent będzie renderowany.

Na przykład:

import stylizowany z„stylizowane komponenty”;
import Reagować z"reagować";
konst Przycisk = stylizowany przycisk`
 wyściółka: 1Rem 0.8rem;
 promień granicy: 15piks;
 kolor tła: szary;
 kolor: #FFFFFF;
 rozmiar czcionki: 15piks;
`
funkcjonowaćAplikacja() {
powrót (

Ten kod renderuje Przycisk składnik jako A element, ustawiając jego href przypisują '#'.

Tworzenie stylów globalnych

Stylizowane komponenty są zwykle ograniczone do komponentu, więc możesz się zastanawiać, jak stylizować aplikację jako całość. Aplikację można stylizować za pomocą stylów globalnych.

Styled-Components oferuje utwórz globalny styl funkcja, która umożliwia globalne deklarowanie stylów. The utwórz globalny styl usuwa ograniczenia stylów o zasięgu komponentu i pozwala deklarować style, które mają zastosowanie do każdego komponentu.

Aby utworzyć style globalne, należy zaimportować plik utwórz globalny styl funkcji i zadeklarować wymagane style.

Na przykład:

import {createGlobalStyle} z„stylizowane komponenty”;
konst GlobalStyles = utwórz GlobalStyle`
 @import URL(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 margines: 0;
 wyściółka: 0;
 rozmiar pudełka: ramka-pudełko;
 }


 ciało {
 kolor tła: #343434;
 rozmiar czcionki: 15piks;
 kolor: #FFFFFF;
 rodzina czcionek: „Montserrat”, bezszeryfowe; 
 }
`
eksportdomyślny style globalne;

Następnie importujesz plik Globalne style component do komponentu aplikacji i wyrenderuj go. Renderowanie Globalne style komponent w twoim komponencie aplikacji zastosuje style do twojej aplikacji.

jak tak:

import Reagować z'reagować';
import Globalne style z'./Światowy';
funkcjonowaćAplikacja() {
powrót (



 </div>
 )
}

Więcej o stylizowanych komponentach

Nauczyłeś się konfigurować, instalować i używać stylizowanych komponentów w aplikacji React. Biblioteka styled-components to efektywny sposób stylizowania aplikacji React. Zapewnia wiele przydatnych funkcji, które pozwalają na elastyczność w stylizacji i dynamiczną stylizację.

Stylizowane komponenty to o wiele więcej, takie jak animacje, a React to duży framework, w którym można się wiele nauczyć.