Question

我正在使用react，遇到一个我喜欢的侧面导航栏。但是，我无法将其更改为默认的red背景色。我尝试制作自己的自定义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

我通过添加 id

解决了这个问题

<SideNav
      onSelect={(selected) => {
        // Add your code here
      }}
      onToggle={onToggle}
      id="sdb"
   >

在 CSS 中：

#sdb{
    background-color: #120A8F;
}

Answer 2

尝试

.sidenav---_u0En{
  background: yourcolor
}

如果仍然无法正常工作，请添加!important

OR

您的代码最有可能无法工作，因为您正在使用background-color，请尝试将其更改为background

Answer 3

SideNav组件允许使用自定义的className，但是在合并classNames时出了点问题。

<SideNav className="menu" > ... </SideNav>

此代码首先添加了您的类.menu，因此CSS样式已崩溃，从而影响了SideNav默认类。

问题出在this line

看this issue

Answer 4

<SideNav style={{'background-color': 'red'}}></SideNav>

无法更改<sidenav>的背景颜色

4 个答案: