Korzystanie z modułów CSS w React

Skrzynia na moduły CSS i jak je zaimplementować w aplikacji React

Jeśli jesteś stosunkowo nowy w CSS, być może napotkałeś znaczący problem, który pojawia się w miarę rozszerzania się stylu aplikacji - ponieważ reguły CSS mają zasięg globalny , zderzą się dwie lub więcej klas o tej samej nazwie. Obsługa wielu arkuszy stylów i śledzenie konwencji nazewnictwa w plikach CSS może być uciążliwe, a jeśli nie jesteś wystarczająco ostrożny, możesz napotkać konflikty z identycznymi nazwami klas.

Moduły CSS mogą rozwiązać te błędy, które mogą się pojawić, zwłaszcza w miarę rozwoju aplikacji. Ostatecznie pozwalają nam używać tej samej nazwy klasy w wielu plikach bez błędów selektorów i reguł, domyślnie określając zakres nazw klas lokalnie .

Moduł CSS to po prostu .cssplik, w którym klasy działają podobnie do lokalnych zmiennych w JavaScript. Jest to narzędzie, które sprawia, że ​​każda klasa jest wyjątkowa, dodając skrót do jej nazwy.

Tworzenie modułu CSS

Jeśli używasz create-react-app, tworzenie modułu CSS dla komponentu jest stosunkowo łatwe. Postępuj zgodnie z typową konwencją nazewnictwa dla pliku css, ale wstaw modulewcześniej .css, na przykład:[name].module.css

Aby zobaczyć przykład, oto mój Task.module.cssplik w prostej aplikacji do wykonania:

Jeśli mam inną boxklasę w innym komponencie, która ma inny kolor, te reguły nie będą kolidować, ponieważ moduły stosują zakres lokalny .

Aby zaimportować moduł CSS do odpowiedniego komponentu, zaimportuj arkusz stylów modułów css jako styleslub [name]Styles:

W JSX użyj zdefiniowanej klasy CSS jako właściwości className w następujący sposób:

Z tego miejsca możesz dodać dowolną liczbę innych modułów CSS, pamiętaj tylko, aby zaimportować każdy pod inną nazwą.

Dzięki modułom CSS możesz tworzyć przenośne pliki CSS wielokrotnego użytku i nie musisz już martwić się kolizjami nazw selektorów lub regułami wpływającymi na style innego składnika.

Często w obliczu decyzji dotyczącej stylizacji aplikacji React programiści są rozdarci między używaniem modułów CSS lub bibliotek CSS-in-JS ( narzędzie do wyodrębniania CSS do poziomu komponentów ), takich jak styled-components, Emotion lub styled-jsx. Ponieważ biblioteki CSS-in-JS stają się coraz szerzej używane i stają się głównym nurtem do deklaratywnego opisywania stylów, zauważyłem, że wielu nadal wierzy, że moduły CSS są drogą do zrobienia, szczególnie ze względu na ich modułowość i właściwości wielokrotnego użytku, które sprawiają, że stylizacja jest o wiele większa bezszwowy.