Працяг вывучэння стылізацыі з 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";

Цяпер мы можам бачыць у браўзеры вынік працы нашага дадатку.

Калі вы адкрыяце згенераваную верстку ў панэлі распрацоўшчыка ў браўзеры, вы ўбачыце, што ў кожнага кампанента згенераваны свае ўнікальныя класы. Такім чынам, нам не трэба больш турбавацца аб канфліктах паміж класамі асобных кампанентаў.

Важна яшчэ тое, што CSS modules не забараняе імпартаваць і звычайныя знешнія CSS файлы.

Паводле тэорыі з урока, ачысціце React кампанент App вашага дадатку inputs, якое вы стваралі ў задачах да мінулага ўрока, а таксама размясціце ў ім, створаны вамі, Inputs у якім-небудзь стылізаваным дыве. Дадайце ў App стылізаваны загаловак. Усё гэта змясціце яшчэ ў які-небудзь дыв. Стылі для тэгаў React кампанента App напішыце ў App.modules.css.

Сабярыце ўсё разам, правільна падключыце астатнія файлы і запусціце свой дадатак inputs.