Jak używać stylizowanych komponentów w React

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:

yarn add styled-components


Tworzenie stylizowanego komponentu

Stylizowany komponent jest taki sam jak standardowy komponent React, ze stylami. Istnieje wiele zalet i wad stylizowanych komponentów, które należy wziąć pod uwagę w celu prawidłowego użytkowania.

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

import styled from "styled-components";


const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`


Tutaj importujesz styl z biblioteki styled-component . Stylizowana funkcja to wewnętrzna metoda, która konwertuje kod JavaScript na rzeczywisty CSS . ComponentName to nazwa stylizowanego komponentu. DOMElementTag to element HTML/JSX, który chcesz 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 React from "react";


function Button() {
    return (
        <button>Welcome!!!</button>
    )
}


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

import styled from "styled-components";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

Łącząc wszystko razem, musisz zastąpić tag przycisku komponentem StyledButton :

import styled from "styled-components";
import React from "react";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function Button() {
    return (
        <StyledButton>Welcome!!!</StyledButton>
    )
}


Style zagnieżdżania

Style można również zagnieżdżać podczas pracy z komponentami stylizowanymi. Zagnieżdżanie stylizowanych komponentów przypomina trochę używanie 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 React from 'react';


function App() {
    return (
        <div>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </div>
    )
}


Ten kod tworzy komponent zawierający element h1 i element p .

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

import React from 'react';
import styled from 'styled-components';


const StyledApp = styled.div`
    color: #333333;
    text-align: center;

function App() {
    return (
        <StyledApp>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </StyledApp>
    )
}


Ten kod używa stylizowanego komponentu i zagnieżdża style dla znaczników h1 i p .

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 styled from "styled-components";


const MainColor = "red";

function App() {
    return (
        <>
            <Heading>Hello World!</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ż używanie 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 konstruktorze styled() , a następnie dołącz wszelkie dodatkowe style.

W tym przykładzie składnik PrimaryButton dziedziczy styl składnika Button i dodaje inny niebieski kolor tła.

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button>Welcome</Button>
        <PrimaryButton>Hello There!</PrimaryButton>
    )
}


Możesz także zmienić tag renderowany przez stylizowany komponent, używając jako rekwizytu.

Właściwość as umożliwia określenie podstawowego elementu HTML/JSX, jako który będzie renderowany stylizowany komponent.

Na przykład:

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button as='a' href='#'>Welcome</Button>
    )
}


Ten kod renderuje komponent Button jako element , ustawiając jego atrybut href na „#”.

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 funkcję createGlobalStyle , która umożliwia globalne deklarowanie stylów. Metoda createGlobalStyle usuwa ograniczenia związane ze stylowaniem ograniczonym do komponentów i umożliwia deklarowanie stylów, które mają zastosowanie do każdego komponentu.

Aby utworzyć style globalne, należy zaimportować funkcję createGlobalStyle i zadeklarować wymagane style.

Na przykład:

import {createGlobalStyle} from 'styled-components';


const GlobalStyles = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

export default GlobalStyles;


Następnie importujesz komponent GlobalStyles do komponentu aplikacji i renderujesz go. Renderowanie komponentu GlobalStyles w komponencie aplikacji spowoduje zastosowanie stylów do Twojej aplikacji.

jak tak:

import React from 'react';
import GlobalStyles from './Global';


function App() {
    return (
        <div>
            <GlobalStyles />
        </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ć.