Как переопределить стили Bootstrap, используя CSS -модули в приложении Create React

Question

Я использую Create React App со встроенными CSS -модулями и установленной 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 стирают мои стили: неправильные стили

Как я могу изменить это поведение?

Answer 1

Это происходит из-за порядка, в котором React добавляет стили на вашу страницу.

App является дочерним компонентом в вашем индексе. js страница, поэтому сначала будут применены стили. Затем, когда React поднимется до родительского уровня индекса. js, он будет применять стили bootstrap к странице. Поскольку и стили bootstrap, и ваши стили имеют одинаковую специфичность, стили bootstrap будут иметь приоритет.

Самое простое решение - повысить специфичность ваших пользовательских классов, которые конфликтуют стили с Bootstrap стили. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Вы также можете импортировать стили Bootstrap в компонент App перед импортом модулей CSS.