Как заставить React CSS импортировать компоненты?

У меня есть несколько компонентов, которые имеют следующую структуру CSS/компонента

About/style.css

.AboutContainer {
    # Some style
}

p > code {
    # Some style
}

И я импортирую CSS в компоненте следующим образом

About/index.js

import './style.css';

export default class About extends Component {
    render() {
         # Return some component
    }
}

Однако CSS импортируется в раздел <header> и остается глобальной областью действия.

Я ожидал, что CSS будет:

Компонент-ограничен таким образом, что стиль применяется только к вещам, которые отображаются только внутри этого компонента.
Стиль для этого компонента исчезнет, если компонент отключен.

Однако при проверке из браузера стили указываются в разделе <header> и применяются ко всем компонентам.

<header>
   // Stuff
   <style type="text/css">style for component About</style>
   <style type="text/css">style for component B</style>
   <style type="text/css">style for component C</style>
   // Stuff
</header>

Как я могу импортировать CSS, чтобы иметь компонентную область? Похоже, я неправильно понимаю импорт CSS в React ES6.

Я следовал этому уроку

редактировать

Ответ Бретта правильный. Однако моя проблема оказывается где-то еще. Я создал свое приложение, используя create-реакции-приложение, которое в основном упрощает настройки, необходимые для выполнения React. Это включает в себя WebPack, Babel и другие вещи, чтобы начать. Используемая в нем конфигурация WebPack по умолчанию не устанавливала опцию модуля для css-loader поэтому по умолчанию она была равна false, и в результате локальное сканирование не было включено.

Просто для дополнительной информации создается впечатление, что у create-response-app нет простого способа настройки конфигурации WebPack, но в Интернете существует множество обходных путей.

Ответ 1

Похоже, что CSS-модули делают то, что вы хотите.

CSS-модуль - это CSS файл, в котором все имена классов и имена анимаций локально локально по умолчанию. Все URL-адреса (url (...)) и @imports находятся в формате запроса модуля (./xxx и.. /xxx означает относительные, xxx и xxx/yyy средства в папке модулей, то есть в node_modules).

Вот краткий пример:

Скажем, у нас есть компонент React:

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Click Me
      </button>
    );
  }
}
export default Button;

и некоторые CSS в ./styles/button.css:

.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

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

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

где _3DjDE - случайный сгенерированный хеш - присвоение классу CSS уникального имени.

Альтернатива

Более простой альтернативой было бы избежать использования общих селекторов (например, p, code и т.д.) И принять соглашение об именах для компонентов и элементов на основе классов. Даже такая конвенция, как BEM, поможет предотвратить конфликты, с которыми вы сталкиваетесь.

Применив это к вашему примеру, вы можете пойти с:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

По сути, все элементы, которые вам нужны для стиля, получат уникальное имя класса.

Ответ 2

Вы можете использовать SASS (.scss) для имитации области CSS.

Скажем, вам нужно использовать загрузчик только в одном компоненте (чтобы избежать конфликтов). Оберните компонент в <div className='use-bootstrap'> и затем создайте файл .scss следующим образом:

.use-bootstrap {   
  // Paste bootstrap.min.css here
}

Ответ 3

Может быть, response-scoped-css поможет. Кстати, я являюсь автором этой библиотеки, если вы найдете что-то сломанное или просто хотите улучшить его, вы всегда можете поднять проблему или отправить pr.