Реагировать стиль / CSS / Sass порядок - PullRequest
Новая
       26

Реагировать стиль / CSS / Sass порядок

0 голосов
/ 11 ноября 2018

У меня есть «App-компонент» и «B-компонент», который отображается внутри моего компонента приложения. У каждого свой стиль.

Но когда он компилируется, мой ComponentB.css помещается перед моим app.css, в результате чего стили ComponentB перезаписываются моими стилями приложения.

Почему это происходит ??

APP 

 import React, { Component } from 'react';
 import ComponentB from './components/ComponentB';
import './styles/app.css';

    class App extends Component {
      render() {
        return (
          <div className="App">
            <ComponentB />
          </div>
        );
      }
    }

    export default App;

КОМПОНЕНТ B 

import React, { Component } from 'react';
import './styles/ComponentB.css';

class ComponentB extends Component {
  render() {
    return (
      <div>
        <h1>Hello from ComponentB</h1>
      </div>
    );
  }
}

export default ComponentB;

1 Ответ

0 голосов
/ 11 ноября 2018

То, как вы это делаете, приводит к конфликтам стилей (один стиль перезаписывает другой стиль), потому что после того, как React скомпилирует ваш код, вы по-прежнему используете те же селекторы для тех же классов.Если вы хотите использовать разные CSS-файлы для разных компонентов, используя одни и те же имена классов, вы должны использовать CSS-модули .

. По умолчанию ваши имена классов CSS будут иметь локальную область видимости.

...