Наставак учења стилизације са CSS модулима у 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";

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

Ако отворите генерисани HTML у алату за програмере у прегледачу, видећете да свака компонента има своје јединствене класе. На тај начин, више не морамо да бринемо о конфликтима између класа појединачних компоненти.

Такође је важно да CSS модули не забрањују импортовање и обичних спољних CSS фајлова.

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

Скупите све заједно, тачно повежите преостале фајлове и покрените своју апликацију inputs.