javascript - 无法更改 <SideNav> 的背景颜色

Question

我正在使用 React，我发现了一个我喜欢的侧面导航栏。但是我无法更改默认的红色背景颜色。我尝试制作自己的自定义 css，并尝试在任何可能的行上输入 className: bg-dark 等，但它不起作用？有人可以帮忙吗？这里还有一个链接到我找到这个导航栏的一侧:https://reactjsexample.com/react-side-nav-component/

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';
import '@trendmicro/react-sidenav/dist/react-sidenav.css';
import Routes from "./Routes";

class App extends Component {
  render() {
    return (
      <div className="App container">
      <SideNav
        onSelect={(selected) => {
            // Add your code here
        }}
      >
        <SideNav.Toggle />
        <SideNav.Nav defaultSelected="home">
            <NavItem eventKey="home">
                <NavIcon>
                    <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
                </NavIcon>
                <NavText>
                    <Link to="/">Scratch</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="sites">
                <NavIcon>
                    <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} />
                </NavIcon>
                <NavText>
                    <Link to="/sites">Sites</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="tours">
                <NavIcon>
                    <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} />
                </NavIcon>
                <NavText>
                    <Link to="/tours">Tours</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="media">
                <NavIcon>
                    <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} />
                </NavIcon>
                <NavText>
                    <Link to="/media">Media</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="newSite">
                <NavIcon>
                    <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} />
                </NavIcon>
                <NavText>
                    <Link to="/newSite">Add new Site</Link>
                </NavText>
            </NavItem>
            <NavItem eventKey="profile">
                <NavIcon>
                    <i className="fa fa-fw fa-line-chart" style={{ fontSize: '1.75em' }} />
                </NavIcon>
                <NavText>
                    <Link to="/profile">Profile</Link>
                </NavText>
            </NavItem>

        </SideNav.Nav>
      </SideNav>
      <Routes />
      </div>
    );
  }
}

export default App;

Answer 1

试试这个

.sidenav---_u0En{
  background: yourcolor
}

如果仍然不起作用，请添加!important

或者

您的代码不起作用很可能是因为您正在使用background-color，请尝试将其更改为background