Продолжување на изучувањето на стилизирањето со CSS modules React

Продолжуваме со работа на нашата апликација buttons. Сега ќе се занимаваме со главната компонента App, која веќе беше генерирана во папката src однапред. Во неа ќе имаме два div-а, наслов и копче.

Ќе го смениме името на датотеката App.css во App.module.css според конвенцијата, ќе ја исчистиме и ќе создадеме во неа неколку класи со CSS стилови за таговите:

.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;
}

А сега ќе го исчистиме содржината на датотеката App.js. Потоа ќе го импортираме React компонентот Buttons и стиловите од App.module.css. Ќе ги напишеме нашите тагови и ќе им ги примениме стиловите, а исто така ќе го поставиме 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;

Го употребивме зборот classes за името на објектот кој ги содржи стиловите, кој го импортираме од App.module.css. Како и во претходниот случај, можете да го наречете овој објект како што ви е погодно.

Остануваат уште неколку мали чекори. Ќе го смениме името на датотеката index.css според конвенцијата на index.module.css и во датотеката index.js не забораваме да ја смениме линијата за импорт:

import "./index.css";

Со линијата:

import "./index.module.css";

Сега можеме да го видиме во прелистувачот резултатот од работата на нашата апликација.

Ако ја отворите генерираната верстка во панелот за развивачи во прелистувачот, ќе видите дека на секоја компонента и се генерирани свои уникатни класи. На тој начин, не треба повеќе да се загрижуваме за конфликти помеѓу класите на одделните компоненти.

Важно е и тоа што CSS modules не забранува импортирање на обични надворешни CSS датотеки.

Следејќи ја теоријата од лекцијата, исчистете го React компонентот App од вашата апликација inputs, која ја создававте во задачите за претходната лекција, а исто така поставете во неа, создадениот од вас, Inputs во некој стилизиран div. Додадете во App стилизиран наслов. Сето ова ставете го во уште некој div. Стиловите за таговите на React компонентата App напишете ги во App.modules.css.

Соберете ги сите заедно, правилно поврзете ги преостанатите датотеки и стартувајте ја вашата апликација inputs.