React 样式/css/sass 顺序答案

【问题标题】：React style/css/sass orderReact 样式/css/sass 顺序
【发布时间】：2019-04-14 07:50:18
【问题描述】：

我有我的“应用程序组件”和一个在我的应用程序组件中呈现的“B 组件”。每个都有自己的风格。

但是当它被编译时，我的 ComponentB.css 被放在我的 app.css 之前，使得 ComponentB 样式被我的应用样式覆盖。

为什么会这样？？

应用程序

 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;

【问题讨论】：

例如，我的规范化 css 将其导入我的 app.css 但在编译时将我的 componentB.css 放在我的 app.css 之前。

标签： css reactjs sass styles

【解决方案1】：

您这样做的方式会导致样式冲突（一种样式覆盖另一种样式），因为在 React 编译您的代码之后，您仍然对相同的类使用相同的选择器。如果你想为不同的组件使用不同的css文件，同时使用相同的类名，你应该使用CSS modules。

这将使您的 CSS 类名默认在本地范围内。

【讨论】：