Кстати, это часть огромной коллекции заметок и карточек под названием CodingNotes. Проверьте это здесь https://www.codingnotes.io/.

Сегодня CodingNotes также участвует в Product Hunt, поэтому проголосуйте за CodingNotes — заметки и карточки для различных языков программирования (producthunt.com).

Существует несколько способов оформления компонента React. Есть идея просто создать файл .css и написать CSS для одного или нескольких компонентов. Однако этот способ является свободным (поэтому неорганизованным), а также имеет свои недостатки.

Модули CSS обеспечивают простой и понятный способ написания CSS для компонентов.

При использовании файла .module.css один файл CSS прикрепляется к одному файлу JSX. Во-первых, это обеспечивает организованный способ работы с CSS, поскольку ясно, какой файл CSS принадлежит какому компоненту. Во-вторых, теперь вы можете использовать одни и те же классы (идентификаторы не работают по умолчанию) в нескольких файлах .jsx и обращаться к ним в нескольких файлах .module.css, не беспокоясь о том, что они перепутаются, следовательно, все файлы .jsx и .module.css имеют одинаковое имя файла. работать изолированно и не мешать другим.

Синтаксис

💡 Если у вас есть компонент с именем Button.jsx, вы можете создать модуль CSS, создав файл с именем Button.module.css.

💡 Затем вы должны импортировать этот файл в свой файл JSX. Вы можете использовать любое слово в качестве импорта, но очень часто вы используете classes. Затем это будет объект, где каждый класс файла css является свойством этого объекта, к которому можно получить доступ.

import classes from "./Button.module.css"

Пример

Мы можем присвоить любому элементу класс (идентификаторы по умолчанию не работают, просто используйте классы) со следующим синтаксисом className={classes.whatever} . ( обратите внимание, что , как указано, classes (если вы назвали его по-другому, просто используйте свое слово, хотя я рекомендую использовать classes ) является объектом, поэтому мы используем точечную нотацию для доступа к свойствам.

JavaScript

<h1 className={classes.heading}> A big heading</h1>

CSS

.heading {
    color:red;
}

Обратите внимание, что это повлияет только на каждый элемент, имеющий класс .heading (здесь только один), который находится в этом конкретном компоненте. Неважно, если в другом компоненте есть еще один элемент с этим className (заголовка), это не вызовет никаких проблем.

→ теперь будет влиять только на этот заголовок в этом компоненте (значение classNames (например, заголовок) может быть одинаковым в нескольких компонентах, js обрабатывает это внутри)

Надеюсь, вы чему-то научились!

Кстати, это часть огромной коллекции заметок и карточек под названием CodingNotes. Проверьте это здесь https://www.codingnotes.io/.

Сегодня CodingNotes также участвует в Product Hunt, поэтому проголосуйте за CodingNotes — заметки и карточки для различных языков программирования (producthunt.com).