Частичная CSS в реакции появляется во всем приложении

Question

У меня есть компонент в реакции, называемый ContentPage.

Компонент имеет свой собственный CSS, называемый ContentPage.css.

Я, очевидно, импортирую его в ContentPage.js, а CSSимпортировано только в этот компонент.

Насколько я понимаю, его стили должны применяться только к ContentPage компоненту. Вместо этого стили из ContentPage.css видны во всем приложении в несвязанных компонентах.

Как применять стили только в этом компоненте?

Вот код:

@import '../../../Variables.scss';
@import '../../../Mixins.scss';

table {
    @include table-border;

    tr {
        @include table-border;


        td, th { 
            @include table-border;

            width: 15%; 
            padding: 2%;

            &:first-child { width: 15%; }
            &:last-child { width: 60%; }
        }
    }
}

и импорт компонента:

import React from 'react';
import './Styles/ContentPage.css';

Answer 1

Вы можете изменить конфигурацию веб-пакета, чтобы убедиться, что CSS становится компонентным.

Посмотрите, когда веб-пакет связывает, он берет ваш файл CSS и добавляет его в один файл CSS или если вы используете style-loaderзатем он добавляет в ваш заголовок. Так как CSS ничего не знает о вашем компоненте, мы должны убедиться, что класс CSS, который у вас есть для вашего компонента, ограничен только для вашего компонента.

Так как же нам этого добиться?

Мы добавляем хэш или какое-то уникальное значение к имени вашего класса, чтобы гарантировать, что класс wrapper , определенный в Header.css , отличается от wrapper в Navbar.css .

Как мы это делаем:

в вашем конфигурационном файле веб-пакета, где вы тестируете css , который вы можетепросто добавьте css-загрузчик следующим образом:

test: /\.(s?)css$/,
use: [
  'style-loader',
  'css-loader',
 ]

измените его на:

test: /\.(s?)css$/,
use: [
  'style-loader',
  {
   loader: 'css-loader',
   options: {
            importLoaders: 1,
            modules: true,
            localIdentName: '[name]__[local]__[hash:base64:5]',
     },
  }

Here modules: true сообщит веб-пакету, что каждый файл css / scss следует рассматривать как модуль дляубедитесь, что он добавляет хэш. localIdentName: '[name] __ [local] __ [hash: base64: 5]', предоставит формат хэша, иначе wepack выдаст свой собственный хэш и заменит вам имя класса.

Answer 2

Когда вы импортируете компонент .css, созданный в момент компиляции / сборки, он создает один файл bundle.css, который будет использоваться вашим приложением.

Если вы хотите предоставить таблицу стилей простодля вашего компонента вы должны сделать так:

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};
const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (
  <div style={divStyle}>
    <p style={pStyle}>Get started with inline style</p>
  </div>
);

export default Box;