React и CSS Styling

Question

На моей странице я должен использовать два реагирующих компонента

Component1 и Component2

Код страницы Page

<Component1/>
<Component2/>

Все стили для компонентов будут исходить от компонентаCSS файлы.Но для макета страницы у меня есть page1.css

Я бы написал селекторы и имена классов и определил бы стили для page1.css.

Может быть много страниц и разных макетов с похожими именами классов, какМожем ли мы контролировать поведение отсутствия основных стилей.

Answer 1

Вы можете использовать модуль CSS для применения стиля к каждому компоненту, он работает так хорошо, легко управляется кодом, а также является локальным селектором, поэтому между двумя компонентами нет конфликта.

Дерево проекта будет иметь вид:

Компонент:

• Кнопка
  • Button.js
  • Button.module.css
• Форма
  • Form.js
  • Form.module.css
• Avatar
  • Avatar.js
  • Avatar.module.css

У каждого компонента будет свой уникальный файл CSS, поэтомупри масштабировании очень легко поддерживать код.

Как использовать:

1. create-react-app
2. Установить css-loader
3. Создание css-файла с надстройкой module по имени файла, например: styles.css => styles.module.css

4.Импорт стилей для компонента:

import styles from './styles.modules.css'

5.Добавить имя класса в тег JSX

    <div className={styles.header}> Hello world</div>

Начните стилизацию вашего компонента, используя обычный CSS

Answer 2

Вы можете использовать CSS только для этого компонента:

page1.js

import './page1.css'
// page1 component

Полагаю, структура папки компонента page1 выглядит следующим образом:

page1/
  page1.css
  page1.js