React менен CSS модулдары аркылуу стилдөөнү улантуу

Келгиле, биздин <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> колдонмоңузду иштетиңиз.