Question

我已经在我的 React 中通过 npm 安装了 bootstrap 并使用它

我做了什么：

npm install react-bootstrap bootstrap
在 App.js 中导入 import 'bootstrap/dist/css/bootstrap.min.css';

我在 index.css 中编写了自己的主体，但是现在当我转到控制台并调用一个组件时，我看到自己的主体被划掉并因此被覆盖。

是否有一个选项可以让我写我的正文并且不会被 Bootstrap 覆盖？

我尝试了什么：

index.css

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

:root {
  --primary: #fff;
}


body {
background: #fff !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-direction: column !important;
font-family: 'Montserrat', sans-serif !important;
height: 100% !important;
}

App.js

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './pages/Login'
import Main from './pages/Main'
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <>
      <Router>
      <Switch>
          <Route path='/' exact component={Main} />
          <Route path='/login' exact component={Login} />
      </Switch>
      </Router>
    </>
  );
}

export default App;

Bootstrap 覆盖自己的书面主体

0 个答案: