自定义CSS不会覆盖React Bootstrap中的NavLink

Question

我对React和Boostrap都是陌生的，所以我已经开始使用react-bootstrap和它们一起玩。我听说重写boostrap CSS的最简单方法之一是在Bootstrap CSS之上应用自己的CSS。所以我有以下页面

我有以下App.js

import React from 'react';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import "bootstrap/dist/css/bootstrap.css";
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';


function App() {
  return (
    <Router>
      <Container fluid>
      <Navbar bg="dark" expand="lg" id="navbar-parent">
        <Navbar.Brand href="#home" id="navigation-bar">TURLS</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav"/>
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" variant="pills">
            <Nav.Link href="#home" className="whte">Home</Nav.Link>
            <Nav.Link href="#api" className="whte">API</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

      </Container>
    </Router>
    );
}

export default App;

以下是App.css

#navigation-bar {
  border-style: solid;
  padding: 15px;
  border-radius: 50px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-weight: 900;
  color: white;
  border-width: 5px;
  font-size: 1.5em;
}

#navigation-bar:hover {
  color: #3399ff;
}

.whte {
  color: white; 
}

我能够使用自己的CSS覆盖Nav.Brand的字体和颜色，并使用CSS #id选择器对其进行引用。但是我无法使用自定义CSS类Nav.Link覆盖.whte。我试图覆盖Home和API的颜色，想要更改字体，pills大小和背景颜色，但我不知道如何。

我可以使用!important更改文本的颜色，但我在某处读到，使用那不是自定义内容的好方法。检查元素后，我发现尽管我的自定义类Nav.Links]

.whte
类似地，我发现蓝色的.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
}
实际上是以下类别的一部分

nav-pills
和

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(0,0,0,.9);
}
我不确定要为期望的效果定制哪些类。我尝试添加我自己的CSS实现，但这不起作用。 

那么通常如何自定义引导CSS？我应该覆盖与boostrap元素关联的所有CSS类吗？还是应该在每个元素上添加一个ID，然后使用相同的代码分别自定义每个元素。

如果问题太幼稚或模棱两可，我深表歉意，我只是想了解在[[React Bootstrap

中更改或自定义引导CSS的推荐方法。感谢您的帮助

我对React和Boostrap都是陌生的，所以我已经开始使用react-bootstrap与他们一起玩。我听说覆盖boostrap CSS的最简单方法之一是在...

Answer 1

嗯，您进行了很好的搜索，您得到了正确的结果。如您所说，在引导程序元素上使用“重要”是不正确的方法，但是除了影响自己的CSS文件之外，没有其他方法可以更改引导程序元素。为此，您可以按您所说的{{style：// like this}}“分配CSS内联，也可以创建自己的引导程序类。如果要使用其他样式的库，则可以使用诸如material-ui之类的库。祝好运 ！ ：）