Question

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

我可以在开发工具中看到代码，但它被划掉了，这是否意味着它被 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");
  }

任何帮助将不胜感激

Answer 1

最后，我决定使用 Canva 创建自己的图像，并在 CSS URL 中引用该图像并添加 !important 标签。详细信息如下，任何人都偶然发现了这一点。

class Sprite implements HasClickHandler {
    constructor() {
        handlePointerDown(this);
    }
    onClick() {
        console.log("clicked!");
    }
}

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

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

1 个答案: