Продължаване на изучаването на стилизирането с CSS modules в 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;

Използвахме думата classes за името на обекта, съдържащ стиловете, който импортираме от App.module.css. Както и в предишния случай, можете да наименувате този обект както ви е удобно.

Остава само няколко малки стъпки. Променяме името на файла index.css по споразумение на index.module.css и във файла index.js не забравяме да сменим реда за импортиране:

import "./index.css";

На реда:

import "./index.module.css";

Сега можем да видим в браузъра резултата от работата на нашето приложение.

Ако отворите генерирания HTML в панела на разработчика в браузъра, вие ще видите, че за всеки компонент са генерирани уникални класове. По този начин, вече не е нужно да се притесняваме за конфликти между класовете на отделните компоненти.

Важно е също така, че CSS модулите не забраняват импортирането на обикновени външни CSS файлове.

Следвайки теорията от урока, изчистете React компонента App на вашето приложение inputs, което създавахте в задачите към предишния урок, както и разположете в него, създадения от вас, Inputs в някакъв стилизиран див. Добавете в App стилизирано заглавие. Всичко това поставете в още един див. Стиловете за таговете на React компонента App напишете в App.modules.css.

Съберете всичко заедно, правилно свържете останалите файлове и пуснете вашето приложение inputs.