React 样式/css/sass 顺序

Posted 2023-02-22

【中文标题】React 样式/css/sass 顺序

【英文标题】：React style/css/sass order

【发布时间】：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 之前。

【参考方案1】：

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

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