反应风格/ css / sass订单

Question

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

Answer 1

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

这将使您的CSS类名默认为本地作用域。