Jak stylizować komponenty React za pomocą CSS

Możesz stylizować swoje aplikacje i strony React za pomocą wielu technik. Najprostszym z nich byłoby pobranie biblioteki komponentów React. Jednak nawet w przypadku korzystania z bibliotek prędzej czy później będziesz musiał dodać niestandardowe style. Więc jaki jest najlepszy sposób na zrobienie tego?

W przypadku projektów na małą skalę możesz wygodnie stylizować swoją aplikację, używając stylów wbudowanych , modułów lub samodzielnie pisząc specyfikacje className . A w przypadku projektów dynamicznych – takich jak aplikacje – lepiej jest użyć biblioteki, która pozwala łatwo implementować rekwizyty.

Alternatywnie możesz użyć zestawu narzędzi, takiego jak Tailwind UI, który jest dostarczany z gotowymi stylami. Jeśli potrzebujesz wyrenderować makietę lub prezentację, zestawy UI przyjazne dla React są dobrym rozwiązaniem.

Praktyczna stylizacja z className

W React, praktyczne style CSS są stosowane poprzez właściwość className .

Jest to również odpowiednik użycia arkusza stylów w twoim projekcie. Ponieważ React opiera się na strukturze komponentów, możesz importować arkusze stylów tylko dla określonych potrzeb.

Spójrzmy na przykład.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

I to byłby wynik:

To całkowicie poprawna technika waniliowa. I jest najczęściej używany do deklarowania zmiennych globalnych, których będziesz ponownie używać w głównych komponentach.

Jedynym zastrzeżeniem jest to, że wraz z rozwojem projektu rośnie też potencjał konfliktów nazw.

Podobnie koszt wydajności zarządzania setkami arkuszy stylów jest absurdalnie wysoki.

Używanie JSX do stylów wbudowanych

React umożliwia stylizowanie elementów DOM za pomocą stylów wbudowanych. Podczas gdy logika CSS pozostaje taka sama, sam styl musi przejść przez JavaScript. Jest to również znane jako JSX.

Spójrzmy na przykład:

Nagłówek.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Zauważysz, że zamiast pisać line-height używamy lineHeight .

Wyjaśnienie tego jest takie, że „Ponieważ JSX jest bliższy JavaScript niż HTML, React DOM używa konwencji nazewnictwa właściwości camelCase zamiast nazw atrybutów HTML”. .

Style wbudowane są zwykle używane do prezentowania przykładów, ale także do dodawania dynamicznych stylów do określonych elementów. Co więcej, style wbudowane nie obsługują pseudoelementów ani zapytań o media, ponieważ możesz przekazać tylko style . Lepszą alternatywą jest użycie arkusza stylów.

Tworzenie lokalnego zakresu za pomocą modułów CSS

Jeśli chcesz zastosować niestandardowe style do komponentów bez kolizji nazw, jednym ze sposobów na to jest użycie modułów CSS.

Jest to podejście, w którym można zastosować zakres lokalny indywidualnie do każdego komponentu.

Tak jak:

Moduł.nagłówka.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

Możesz także robić takie rzeczy, jak kompozycja , gdzie wywołujesz określony styl z innego arkusza stylów – unikając konieczności dwukrotnego przepisywania tej samej logiki.

 .header { composes: header from './style.css'; }

CSS w JS

W przeciwieństwie do frameworków, takich jak Vue i Svelte, React nie zapewnia własnego interfejsu do stylizacji.

Tak więc, o ile możesz pisać CSS dla komponentów używając wyżej wymienionych metod, podejściem Świętego Graala jest używanie CSS w bibliotekach JS. Każda biblioteka ma swoje mocne i słabe strony, ale generalnie korzyści pozostają takie same:

• Rekwizyty do różnych wariacji stylistycznych.
• Dostępne motywy.
• Zakres stylu oparty na komponentach.
• Dynamiczne zmienne CSS wykorzystujące funkcje JavaScript.

Najpopularniejszym rozwiązaniem dla CSS w JS są Styled Components.

Inne godne uwagi wybory to Emotion i Linaria. Na potrzeby demonstracji przyjrzyjmy się, jak CSS jest zintegrowany z komponentem React przy użyciu biblioteki Styled Components.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Najpierw tworzymy nowy komponent o nazwie HeaderWrapper , który wyrenderuje kontener <section> dla naszego tytułu nagłówka. Następnie tworzymy kolejny komponent o nazwie HeaderTitle i przekazujemy do niego zmienne CSS. W pewnym sensie jest to dokładnie to samo, co praca z Web Components, tylko w kontekście Reacta.

Korzystanie z ram CSS

Nie chodzi o to, że wszystko we front-endzie zmierza w kierunku frameworków i bibliotek.

Chodzi bardziej o to, że rozpoczynanie projektu od niczego jest nieefektywne. Framework taki jak Tailwind CSS pomaga złagodzić potrzebę pisania wszystkich struktur aplikacji od podstaw. Sposób, w jaki działa CSS Tailwind, polega na tym, że platforma udostępnia wstępnie określone klasy narzędzi, które umożliwiają tworzenie struktury układu bez konieczności pisania niezależnego kodu CSS.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Tak więc, zamiast definiować styl komponentu za pomocą Constants , możemy bezpośrednio napisać styl określony przez framework. Taka metoda jest niezwykle wydajna i możesz na przykład importować komponenty interfejsu użytkownika (takie jak karty) wykonane przez innych.

CSS Tailwind jest szczególnie popularny, ponieważ możesz bezpośrednio kopiować i wklejać fragmenty, a następnie używać ich w projekcie aplikacji bez żadnych konsekwencji.

Korzystanie z biblioteki interfejsu użytkownika

Ostatnią metodą stylizowania komponentów Reacta jest użycie biblioteki UI. W przeciwieństwie do frameworka, biblioteka interfejsu użytkownika jest zgodna z wytycznymi dotyczącymi stylu. Pod wieloma względami ma więc już ustalony styl. Na przykład Mantine i Material UI to tylko niektóre z wyborów, do których należy przejść.

Jedynym „minusem” jest to, że musisz poświęcić sporo czasu na naukę tej konkretnej biblioteki. Ale to samo można powiedzieć o frameworkach. Pomimo bariery wejścia, zarówno frameworki CSS, jak i biblioteki UI są złotym standardem w stylizacji komponentów React.