Продолжение изучения стилизации с 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.