My custom Sidebar component needs to have its background color set using Material-UI's primary palette color.
Sidebar.js
import styles from '../styles/Home.module.css';
export default function Sidebar() {
return (
<div className={styles.sidebar}>
<hr className={styles.divider} />
</div>
)
}
Home.module.css
.sidebar {
left: 0;
top: 64px;
height: 100vh;
z-index: 20;
width: 60px;
position: fixed;
}
_app.js
import '../styles/globals.css';
import NavBar from '../components/NavBar';
import Sidebar from '../components/Sidebar';
function MyApp({ Component, pageProps }) {
return (
<>
<NavBar></NavBar>
<Sidebar color="primary"></Sidebar>
<Component {...pageProps} />
</>
)
}
export default MyApp
The
<Sidebar color="primary">