Moduły CSS umożliwiają lokalne określenie zakresu nazw klas CSS. Nie musisz się martwić o nadpisywanie stylów, gdy używasz tej samej nazwy klasy.

Dowiedz się, jak działają moduły CSS, dlaczego warto ich używać i jak zaimplementować je w projekcie React.

Czym są moduły CSS?

The Dokumentacja modułów CSS opisać moduł CSS jako plik CSS, którego nazwy klas są domyślnie ograniczone lokalnie. Oznacza to, że możesz adresować zmienne CSS o tej samej nazwie w różnych plikach CSS.

Klasy modułów CSS piszesz tak, jak zwykłe klasy. Następnie kompilator generuje unikalne nazwy klas przed wysłaniem CSS do przeglądarki.

Rozważmy na przykład następującą klasę .btn w pliku o nazwie styles.modules.css:

.btn {
 szerokość: 90px;
 wysokość: 40px;
 dopełnienie: 10px 20px;
}

Aby użyć tego pliku, musisz go zaimportować do pliku JavaScript.

import style z „./style.moduł.js”

Teraz, aby odwołać się do klasy .btn i udostępnić ją w elemencie, użyjesz klasy, jak pokazano poniżej:

klasa="style.btn"

Proces budowania zastąpi klasę CSS unikalną nazwą formatu, taką jak _style__btn_118346908.

instagram viewer

Unikalność nazw klas oznacza, że ​​nawet jeśli użyjesz tej samej nazwy klasy dla różnych komponentów, nie będą one kolidować. Możesz zagwarantować większą niezależność kodu, ponieważ możesz przechowywać style CSS składnika w jednym pliku, specyficznym dla tego składnika.

Upraszcza to debugowanie, zwłaszcza jeśli pracujesz z wieloma arkuszami stylów. Musisz tylko wyśledzić moduł CSS dla konkretnego komponentu.

Moduły CSS umożliwiają również łączenie wielu klas za pomocą komponuje słowo kluczowe. Rozważmy na przykład poniższą klasę .btn powyżej. Możesz „rozszerzyć” tę klasę o inne klasy za pomocą komponowania.

W przypadku przycisku przesyłania możesz mieć:

.btn {
/* style */
}
.Zatwierdź {
 komponuje: btn;
 kolor tła: zielony;
 kolor:#FFFFFF
}

Łączy to klasy .btn i .submit. Możesz także komponować style z innego modułu CSS w ten sposób:

.Zatwierdź {
 komponuje: podstawowy z "./kolory.css"
 kolor tła: zielony;
}

Zauważ, że musisz napisać regułę komponowania przed innymi regułami.

Jak korzystać z modułów CSS w React

Sposób korzystania z modułów CSS w React zależy od tego, jak tworzysz aplikację React.

Jeśli używasz create-react-app, moduły CSS są konfigurowane po wyjęciu z pudełka. Jeśli jednak zamierzasz tworzyć aplikację od podstaw, będziesz musiał skonfigurować moduły CSS za pomocą kompilatora, takiego jak webpack.

Aby śledzić ten samouczek, powinieneś mieć:

  • Węzeł zainstalowany na twoim komputerze.
  • Podstawowa znajomość modułów ES6.
  • Prosty zrozumienie React.

Tworzenie aplikacji React

Aby wszystko było proste, możesz użyć aplikacja-stwórz-reaguj do tworzenia szkieletów aplikacji React.

Uruchom to polecenie, aby stworzyć nowy projekt React zwane modułami reakcji-css:

npx Stwórz-react-app-react-css-modules

Spowoduje to wygenerowanie nowego pliku o nazwie React-css-modules ze wszystkimi zależnościami wymaganymi do rozpoczęcia pracy z Reactem.

Tworzenie komponentu przycisku

W tym kroku utworzysz komponent Button i moduł CSS o nazwie Button.module.css. W folderze src utwórz nowy folder o nazwie Components. W tym folderze utwórz kolejny folder o nazwie Button. Do tego folderu dodasz składnik Button i jego style.

Nawigować do src/Komponenty/Przycisk i utwórz Button.js.

eksportdomyślnafunkcjonowaćPrzycisk() {
zwrócić (
<przycisk>Składać</button>
 )
}

Następnie utwórz nowy plik o nazwie Button.module.css i dodaj następujący.

.btn {
 szerokość: 90px;
 wysokość: 40px;
 dopełnienie: 10px 20px;
 promień obramowania: 4px;
 granica: brak;
}

Aby użyć tej klasy w komponencie Button, zaimportuj ją jako style i odnieś się do nazwy klasy elementu przycisku w następujący sposób:

import style z "./Przycisk.moduł.css"
eksportdomyślnafunkcjonowaćPrzycisk() {
zwrócić (
<button className={styles.btn}>Składać</button>
 )
}

To jest prosty przykład, który pokazuje, jak używać jednej klasy. Możesz chcieć współdzielić style w różnych komponentach, a nawet łączyć klasy. W tym celu możesz użyć słowa kluczowego composes, jak wspomniano wcześniej w tym artykule.

Korzystanie z kompozycji

Najpierw zmodyfikuj komponent Button za pomocą następującego kodu.

import style z "./Przycisk.moduł.css"
eksportdomyślnafunkcjonowaćPrzycisk({type="podstawowy", label="Przycisk"}) {
zwrócić (
<button className={style[typ]}>{etykieta}</button>
 )
}

Ten kod sprawia, że ​​składnik Button jest bardziej dynamiczny dzięki zaakceptowaniu wartości typu jako właściwości. Ten typ określi nazwę klasy zastosowaną do elementu przycisku. Jeśli więc przycisk jest przyciskiem prześlij, nazwą klasy będzie „prześlij”. Jeśli jest to „błąd”, nazwą klasy będzie „błąd” i tak dalej.

Aby użyć słowa kluczowego composes zamiast pisać wszystkie style dla każdego przycisku od podstaw, dodaj następujące elementy do Button.module.css.

.btn {
 szerokość: 90px;
 wysokość: 40px;
 dopełnienie: 10px 20px;
 promień obramowania: 4px;
 granica: brak;
}
.podstawowy {
 komponuje: btn;
 kolor: #FFFFFF;
 kolor tła: #6E41E2;
}
.wtórny {
 komponuje: btn;
 kolor: #6E41E2;
 kolor tła: #FFFFFF;
}

W tym przykładzie klasa podstawowa i klasa dodatkowa wykorzystują klasę btn. W ten sposób zmniejszasz ilość kodu, który musisz napisać.

Możesz pójść jeszcze dalej dzięki zewnętrznemu modułowi CSS o nazwie kolory.moduł.css, zawierający kolory używane w aplikacji. Możesz następnie użyć tego modułu w innych modułach. Na przykład utwórz plik colors.module.css w katalogu głównym folderu Components z następującym kodem:

.primaryBg {
 kolor tła: #6E41E2
}
.secondaryBg {
 kolor tła: #FFFFFF
}
.kolor podstawowy {
 kolor: #FFFFFF
}
.dodatkowy kolor {
 kolor: #6E41E2
}

Teraz w pliku Button/Button.module.css zmodyfikuj klasy podstawową i drugorzędną, aby używały powyższych klas w następujący sposób:

.podstawowy {
 komponuje: btn;
 komponuje: primaryColor od "../kolory.moduł.css";
 komponuje: primaryBg z "../kolory.moduł.css";
}
.wtórny {
 komponuje: btn;
 komponuje: drugorzędnyKolor z "../kolory.moduł.css";
 komponuje: drugorzędneBg z "../kolory.moduł.css";
}

Sass z modułami CSS

Możesz użyć modułów CSS, aby poprawić modułowość swojej bazy kodu. Jako przykład możesz utworzyć prostą klasę CSS dla komponentu przycisku i ponownie użyć klas CSS poprzez kompozycję.

Aby zwiększyć możliwości korzystania z modułów CSS, użyj Sassa. Sass — Syntactically Awesome Style Sheets — to preprocesor CSS, który zapewnia mnóstwo funkcji. Obejmują obsługę zagnieżdżania, zmiennych i dziedziczenia, które nie są dostępne w CSS. Dzięki Sass możesz dodać do swojej aplikacji bardziej złożone funkcje.