时间戳

首页 > 解决方案 > 如何在 Create React App 中使用 CSS 模块覆盖 Bootstrap 样式

css - 如何在 Create React App 中使用 CSS 模块覆盖 Bootstrap 样式

问题描述

我使用带有嵌入式 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 中的样式删除了我的样式： 错误的样式

我怎样才能改变这种行为？

标签： cssreactjstwitter-bootstrap

解决方案

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

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

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

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

推荐阅读