如何在 React 中更改引导导航栏切换器答案

【问题标题】：How to change the bootstrap navbar toggler in React如何在 React 中更改引导导航栏切换器
【发布时间】：2021-04-26 05:16:22
【问题描述】：

在 React 中，我想要么完全改变切换器，要么至少改变颜色。我已经尝试了以下链接上的解决方案，但没有成功。

5 Years Ago

1 Year Ago

1 Month Ago

我可以在开发工具中看到代码，但它被划掉了，这是否意味着它被 Bootstrap 覆盖了？

这是我的 NavBar.js 文件：

import React, { Component } from "react";
import logo from "../images/logo.png";
import { Nav, Navbar, NavDropdown, Form, FormControl, Button, Container } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css';
      
       export default class NewNav extends Component {
       render() {
       return <div className="myContainer">
        <Navbar id="navbar" className="newNav" expand="lg">
        <Navbar.Brand href="/"><img id="logo" src={logo} alt="Company Name"/></Navbar.Brand>
        <Navbar.Toggle className="custom-toggler" aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
                <Nav.Link id="nav-links" href="/cleaning-services">Services</Nav.Link>
                <Nav.Link href="#link">About</Nav.Link>
                <Nav.Link href="#link">Something Else</Nav.Link>
                <Nav.Link href="#link">One more then</Nav.Link>
            </Nav>

                </Navbar.Collapse>
    </Navbar>
        </div>

  }
}

这是我在中自定义切换器的 CSS

.navbar-light .navbar-toggler-icon {
   background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-512.png");
  }

任何帮助将不胜感激

【问题讨论】：

我在 head 部分看不到您的自定义 css 的任何导入。我认为很难覆盖默认的 Bootstrap css。您需要使用 !important 标志设置 css 属性。
因为我使用的是 react-router-dom，所以我的 CSS 是在 App.js 文件中导入的。我确实尝试在 NavBar.js 上导入文件，但没有任何区别。我也使用过 !important 但我不想过多使用它，因为这不是好的做法，应该使用 CSS 特异性，但这似乎不起作用。

标签： css reactjs bootstrap-4

【解决方案1】：

最后，我决定使用 Canva 创建自己的图像，并在 CSS URL 中引用图像并添加 !important 标记。以下是任何人偶然发现的详细信息。

.navbar-light .navbar-toggler-icon {
 background-image: url("../src/images/alignRight.svg") !important;
  border-color: var(--secondaryColor) !important;
}

我还将边框更改为透明以获得我的最终按钮，如下所示。

【讨论】：