Пользовательский интерфейс — это первый шаг, прежде чем мы начнем вводить логику для завершения нашего интерфейса. Итак, мы пишем разметку, а затем основные стили, необходимые для получения желаемого пользовательского интерфейса. При написании разметки нам необходимо создать осмысленные имена классов для обращения к HTML-тегу и доступа к нему, а также добавить к нему стиль. Благодаря простому пользовательскому интерфейсу и отдельным тегам мы можем сделать это более или менее легко. При написании повторяющегося и сложного пользовательского интерфейса давать осмысленные и четкие имена становится катастрофой, поскольку существует всего несколько общих имен. Поэтому мы создаем компоненты и таблицы стилей для отдельных компонентов. Как показано ниже.

Мы видим, что два компонента: GreenContainer и RedContainer импортируются в App.js из папки компонентов внутри src. Соответствующие таблицы стилей — RedContainer.css и GreenContainer.css — импортируются из папки стилей. Давайте рассмотрим компонент и его таблицы стилей один за другим.

Первый компонент, RedContainer.jsx

Соответствующая таблица стилей — RedContainer.css

Теперь взгляните на второй компонент, GreenContainer.js -

CSS-файл для второго компонента GreenContainer.css

Обе таблицы стилей содержат отдельные свойства CSS для соответствующих компонентов. Таким образом, ожидаемым результатом пользовательского интерфейса может быть экран с двумя блоками: один — красный квадрат с плечами размером 150 пикселей, а другой — зеленый квадрат с плечами размером 200 пикселей. Давайте посмотрим на отрисованное приложение React.

Почему это происходит? Свойства CSS из последнего контейнера были применены к обоим контейнерам. Но как? Ответ заключается в том, что непосредственно перед рендерингом приложения React все таблицы стилей компилируются в один файл CSS, где есть два селектора классов с одинаковым именем — «.container», и именно поэтому свойства CSS из последнего «.container{ }» были применены ко всем контейнерам по всему миру. Эту проблему можно решить с помощью модулей CSS. Модули CSS — это файлы CSS, в которых все имена классов по умолчанию ограничены локально. Это помогает нам следующим образом

1) Локализация стилей для конкретных компонентов предотвращает этот конфликт глобальной области.

2) Разрешить использование одних и тех же имен классов в разных модулях и способствовать модульному стилю.

Чтобы использовать модульные стили, нам нужно заменить «.css» на «.module.css» и импортировать «стили» из этих файлов.

Импорт стилей в соответствующие компоненты. Для RedContainer -

Для GreenContainer

Обычно мы пишем имя класса в виде такой строки: если имя класса — «контейнер», мы пишем имя класса = «контейнер». Для модулей CSS мы будем писать имя класса следующим образом className = {styles.container} в файлах jsx. Теперь давайте посмотрим, как отображается приложение реагирования -

Теперь нет проблем с конфликтами CSS, и стили применяются к соответствующим компонентам соответствующим образом.