CSS модульдерімен React-та стильдеуді жалғастыру

Біздің buttons қолданбамызға жұмысты жалғастырайық. Енді негізгі App компонентіне көшейік, ол бастапқыда src бумасында тудырылған болатын. Онда бізде екі див, тақырып атауы және батырма болады.

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;

Біз App.module.css-тен импорттайтын стильдер объектісінің аты ретінде classes сөзін қолдандық. Алдыңғы жағдайдағыдай, сіз бұл объектіні өзіңізге ыңғайлы атпен атай аласыз.

Бірнеше кішігірім қадам қалды. index.css файл атауын келісім бойынша index.module.css деп өзгертіп, index.js файлында импорт жолын ауыстыруды ұмытпаңыз:

import "./index.css";

Мына жолға:

import "./index.module.css";

Енді біз браузерде қолданбамыздың жұмыс нәтижесін көре аламыз.

Егер сіз браузердің әзірлеуші панелінде тудырылған верстканы ашсаңыз, әрбір компоненттің өзіндік бірегей кластарға ие екенін көресіз. Осылайша, бізге жеке компоненттердің кластары арасындағы қақтығыстар туралы алаңдаудың қажеті жоқ.

Тағы бір маңызды нәрсе - CSS модульдері кәдімгі сыртқы CSS файлдарын импорттауға тыйым салмайды.

Сабақтағы теорияны ескере отырып, өткен сабақтағы тапсырмаларда жасаған inputs қолданбаңыздың React компоненті App тазалаңыз және оған өзіңіз жасаған Inputs компонентін қандай да бір стильденген див ішінде орналастырыңыз. App-қа стильденген тақырып атауын қосыңыз. Мұның бәрін тағы бір див ішіне салыңыз. React компоненті App тегтерінің стильдерін App.modules.css-та жазыңыз.

Барлығын жинақтаңыз, қалған файлдарды дұрыс қосыңыз және өз inputs қолданбаңызды іске қосыңыз.