Impossible de changer la couleur d'arrière-plan de

J'utilise react et je suis tombé sur une barre de navigation latérale qui me plaît. Cependant, je ne peux pas changer la couleur d'arrière-plan par défaut rouge . J'ai essayé de créer mon propre css personnalisé et d'essayer d'entrer className: bg-dark etc sur n'importe quelle ligne possible et cela ne fonctionne pas? Quelqu'un peut-il aider? Voici également un lien vers le côté où j'ai trouvé cette barre de navigation: 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;