React style/css/sass 顺序

Question

我有我的“应用程序组件”和“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;

Answer 1

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

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