React style/css/sass order

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

css文件按导入顺序添加到html中。因此，为了影响它们的列出顺序，请转到您的App.jsx并将app.css导入行移动到ComponentB导入行上方，使其看起来像：

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

然后，你会得到你想要的行为。

Answer 2

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

默认情况下，这将使CSS类名的作用域在本地。