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。我试图覆盖主页和 API 的颜色，想更改字体，pills的大小和背景颜色，但是我不知道如何

我可以使用!important更改文本的颜色，但是我在某处读到，使用那不是自定义内容的好方法。检查元素后，我发现Nav.Links从以下CSS类中获得了颜色，尽管我的自定义类为.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);
}

和

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #007bff;
}

我不确定要为期望的效果定制哪些类。我尝试添加我自己的CSS实现，但这不起作用。

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

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

中更改或自定义引导CSS的推荐方法

感谢您的帮助

Answer 1

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

1：内联CSS：

public async Task Publish<T>(string partitionKey, T message) where T : IMessage { foreach (var publisher in _publishers) { try { await TrySendAsync(partitionKey, message, publisher); break; } catch (Exception e) { _logger.LogError( $"Publishing with producer targeting EventHub {publisher.EventHubName} failed with message {e.Message}"); } } }

2：自定义CSS：

<Navbar.Brand href="#home" id="navigation-bar" style = {{color:'white'}}>TURLS</Navbar.Brand>

3：对Bootstrap自己的css文件起作用：

 #navigation-bar {
       color : white !important;
    }

4：不随引导程序一起使用但可以在引导程序端使用的react-use类：

//in nodemodules, the bootstrap files that you downloaded to the navbar-related parts to affect.

祝你好运！：）

Answer 2

您的逻辑进展顺利。众所周知如果CSS内容大小的下载速度比服务器对inline CSS文件请求的响应速度（考虑DNS时间，服务器延迟等）的响应速度快，那么external CSS的加载速度就会更快。

您可以在此处将内联css与style={{/*your styles */ }}一起使用。

您可以按照some answer in SO中的说明检查一些好的答案。

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

2 个答案: