При использовании контейнера в React-Boostrap цвет фона моего тела перезаписывается

Question

Я представляюсь, чтобы отреагировать bootstrap. Пока что в npm у меня есть следующее:

npm install react-bootstrap bootstrap

Оттуда я сделал свой родительский элемент в App.js контейнером:

import React from 'react';
import {Link, Route, BrowserRouter, Switch} from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css';
    
function App() {
  return (
    <BrowserRouter>
    <div className="App container">
       ...
    </div>
    </BrowserRouter>
  );
}

И у меня также есть bootstrap импортировано в соответствии с документацией response BootStrap:

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

Затем я отредактировал свой index.css, так что мой класс контейнера имеет белый фон, а мое тело имеет бирюзовый фон:

body {
    background-color: teal;
}
    
.container {
    background-color: white;
}

У меня проблема в том, что вся моя страница отображается на белом фоне. Когда я открываю inspect, он показывает, что у моего тела действительно был бирюзовый background-color, но он был переопределен, но я не уверен, когда в моем коде он был перезаписан. Есть ли у кого-нибудь опыт работы с такой проблемой? Моя цель - получить белый контейнер с бирюзовым фоном по обе стороны от контейнера, когда я просматриваю свою страницу.

Answer 1

CSS означает каскадные таблицы стилей. - Каскад является ключевым словом здесь. В шаблоне React index.html (где применяется index.css) фактически загружает App.js, а затем App.css.

Следовательно, это означает, что любой файл, примененный или загруженный после index.css, который имеет подходящее правило CSS перезапишет правила CSS, которые вы добавили в index.css.

Лучшее решение здесь - добавить import "./App.css" в начало вашего ./App.js и добавить свои правила в App.css. Таким образом, они загружаются и являются концом цепочки, и они должны перезаписать все, что было применено заранее:

import React from 'react';
import {Link, Route, BrowserRouter, Switch} from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css'

function App() {
  return (
    <BrowserRouter>
    <div className="App container">
        text in a container
    </div>
    </BrowserRouter>

  );
}

export default App;

Затем в вашем приложении. css добавьте:

body {
        background-color: teal;
}

.container{
        background-color: white;
}

После выполнения в результате вы получите следующее:

Что означает «каскадирование» в CSS?