Rozpoczęcie nauki stylowania z CSS modules w React

W tej i kolejnych lekcjach, będziemy rozważać kolejne nowoczesne i skuteczne podejście do stylowania komponentów React - użycie modułów CSS.

Moduły CSS w tym podejściu - to oddzielne skompilowane pliki CSS, w których nazwy klas i animacji znajdują się w lokalnej przestrzeni nazw, co pozwala uniknąć konfliktów między nazwami klas z różnych komponentów.

Na początek stwórzmy i uruchommy naszą prostą aplikację React buttons. W tym celu stwórzmy pusty folder test, wejdźmy do niego i w terminalu napiszmy następujące polecenia:

npx create-react-app buttons
cd buttons
npm start

Jeśli masz świeżą wersję React, to znaczy ona obsługuje Create React App v2 i wyżej, to żadnych dodatkowych ustawień robić nie trzeba, ponieważ w tym przypadku moduły CSS będą obsługiwane automatycznie. Aby to sprawdzić zajrzyj do package.json, jeśli zależność react-scripts w wersji 2.x.x i wyżej, to wszystko w porządku. W przeciwnym razie zaktualizuj swój React.

Nasza aplikacja do stylowania metodą modułów CSS będzie zawierać trzy przyciski.

Pliki CSS będziemy nazywać, trzymając się konwencji, w następujący sposób: [name].module.css.

Załóżmy teraz folder components w src, a do niego dodajmy plik Buttons.module.css ze stylami CSS do naszych przycisków:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Również w folderze components, stwórzmy pusty plik komponentu React Buttons.js, przy tym na razie nie ruszaj wygenerowanego pliku App.js, zajmiemy się nim później!

W Buttons.js obowiązkowo zaimportujmy plik ze stylami CSS, a także zastosujmy te style do każdego przycisku za pomocą atrybutu class:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Nawiasem mówiąc, nie jest konieczne używanie słowa styles dla nazwy importowanego obiektu ze stylami, możesz nazwać go, jak ci wygodnie.

W następnej lekcji ukończymy naszą aplikację.

Kierując się teorią z tej lekcji wygeneruj aplikację React inputs.

Użyj podejścia modułów CSS, podanego w lekcji. Stwórz w src aplikacji inputs plik Inputs.js dla komponentu React Inputs, który będzie zawierał trzy inputy. Napisz parę-trójkę stylów w Inputs.modules.css do inputów. Zaimportuj ten plik w Inputs.js i zastosuj style.