Jak stylizować komponenty React za pomocą modułów CSS?

Jak stylizować komponenty React za pomocą modułów CSS?

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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

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

import styles from "./styles.module.js"

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



class="styles.btn"

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

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.

zaplanuj aktualizację systemu Windows 10 anuluj

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

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

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

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

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 create-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.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

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 styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

To jest prosty przykład, który pokazuje, jak używać pojedynczej klasy. Możesz chcieć udostępniać 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 styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</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 przesyłania, 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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #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 { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

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

jak zakrzywić tekst w programie Illustrator 
.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.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 usprawnić korzystanie z modułów CSS, użyj Sass. 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.