如何在Create React App中使用CSS-modules覆盖引导程序样式

Question

我使用了带有嵌入式CSS模块的Create React App，并安装了Bootstrap库。下面是一个示例代码：

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

App.jsx

import React from 'react';
import styles from './style.module.css';

const App = () => (
  <nav className={`navbar fixed-top ${styles.navbar}`}>test</nav>
);

export default App;

style.module.css

.navbar {
  background: #fff;
  height: 100px;
  padding: 1.5rem 0;
  box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
}

但结果是，Bootstrap中的样式会擦除我的样式：wrong styles

如何更改此行为？

Answer 1

这是由于React将样式添加到页面的顺序造成的。

App是index.js页面中的一个子组件，因此将首先应用它的样式。然后，当React向上移动到index.js的父级时，它会将引导样式应用于页面。由于bootstrap样式和您的样式具有相同的特异性，因此将优先使用bootstrap样式。

最简单的解决方案是增加与Bootstrap样式冲突的自定义类的特异性。https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

在导入App模块之前，您还可以在组件中导入Bootstrap样式。