I've been working with react and recently discovered a side navbar design that caught my eye. However, I'm struggling to change the default background color from red. I've attempted creating custom CSS styles and adding className: bg-dark in various lines of code without success. Can anyone provide guidance on how to achieve this? Also, here is the link to the source where I found the side navbar:
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;