Cannot change the background colour of

I’m using react and I came across a side navbar that I like. However I cannot change it from the default red background colour. I tried making my own custom css, and trying entering className: bg-dark etc on any line possible and it isn’t working? Can anyone help? Also here is a link to the side where I found this navbar: 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

Try this

.sidenav---_u0En{
  background: yourcolor
}

if it still doesn’t work add !important

your code doesn’t work most likely because you are using background-color try changing it to background

Advertisement

Answer