在 React-Boostrap 中使用容器时，我身体的背景颜色被覆盖

Question

我正在自我介绍以反应引导程序。到目前为止，我在 npm 中有以下内容：

npm install react-bootstrap bootstrap

从那里，我在App.js容器中创建了我的父元素：

npm install react-bootstrap bootstrap

而且我还根据 reactBootStrap 文档导入了引导程序：

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>
  );
}

接下来，我编辑了index.css我的容器类，使我的容器类具有白色背景，而我的身体具有青色背景：

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

我遇到的问题是我的整个页面都显示白色背景。当我打开检查时，它显示我的身体确实有一个蓝绿色background-color，但它被覆盖了，但我不确定在我的代码中它何时被覆盖。有没有人有过这样的问题的经验？我的目标是有一个白色的容器，当我查看我的页面时，容器的两侧都有青色背景。

Answer 1

CSS 代表级联样式表-级联是这里的关键词。在 React 模板中index.html（index.css应用的位置）实际加载App.js和App.css之后。

因此，这意味着在index.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;

然后，在您的 App.css 中，添加：

body {
        background-color: teal;
}

.container{
        background-color: white;
}

完成此操作后，您基本上会得到以下结果：

您可以在以下问题中在 SO 上阅读有关级联的更多信息： CSS 中“级联”的含义是什么？