Kontynuacja nauki stylizacji z modułami CSS w React

Kontynuujmy pracę nad naszą aplikacją buttons. Teraj zajmiemy się głównym komponentem App, który już był wygenerowany w folderze src początkowo. W nim będziemy mieli dwa divy, nagłówek i przycisk.

Zamieńmy nazwę pliku App.css na App.module.css zgodnie z konwencją, wyczyśćmy go i utwórzmy w nim kilka klas ze stylami CSS dla tagów:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

A teraz wyczyśćmy zawartość pliku App.js. Następnie zaimportujmy komponent React Buttons i style z App.module.css. Napiszmy nasze tagi i zastosujmy do nich style, a także umieśćmy komponent React Buttons:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Użyliśmy słowa classes dla nazwy obiektu zawierającego style, który importujemy z App.module.css. Jak i w poprzednim przypadku, możesz nazwać ten obiekt jak ci wygodnie.

Pozostało kilka małych kroków. Zmieńmy nazwę pliku index.css zgodnie z konwencją na index.module.css i w pliku index.js nie zapomnijmy zamienić linii importu:

import "./index.css";

Na linię:

import "./index.module.css";

Teraz możemy zobaczyć w przeglądarce wynik działania naszej aplikacji.

Jeśli otworzysz wygenerowany kod HTML w panelu deweloperskim w przeglądarce, zobaczysz, że każdy komponent ma wygenerowane swoje unikalne klasy. W ten sposób nie musimy się już martwić o konflikty między klasami poszczególnych komponentów.

Ważne jest również to, że moduły CSS nie zabraniają importować zwykłych zewnętrznych plików CSS.

Kierując się teorią z lekcji, wyczyść komponent React App twojej aplikacji inputs, którą tworzyłeś w zadaniach do poprzedniej lekcji, a także umieść w nim, stworzony przez ciebie, Inputs w jakimś ostylizowanym divie. Dodaj w App ostylizowany nagłówek. Wszystko to umieść jeszcze w jakimś divie. Style dla tagów komponentu React App napisz w App.modules.css.

Złóż wszystko razem, poprawnie podłącz pozostałe pliki i uruchom swoją aplikację inputs.