如何在自定义 React 组件中使用 Material-UI 主题调色板颜色？

Question

I have a custom Sidebar component for which I would like the background color to use 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

Obviously the <Sidebar color="primary"> doesn't work. I'm not sure how to achieve this.

Answer 1

You can access the theme values by using a HOC or the useThemee hook.

https://material-ui.com/styles/advanced/#accessing-the-theme-in-a-component

From there, you can get the theme color and pass it down to the Sidebar component.

function MyApp({ Component, pageProps }) {
  const theme = useTheme();
  return (
    <>
      <NavBar></NavBar>
      <Sidebar color={theme.palette.primary1Color}></Sidebar>
      <Component {...pageProps} />
    </>
  )
}

Answer 2

This is how I got it working using useTheme() at nipuna's suggestion.

Sidebar.js

import styles from '../styles/Home.module.css';
import { useTheme } from '@material-ui/core/styles';

export default function Sidebar() {
  const theme = useTheme();
  return (
    <div style={{ backgroundColor: theme.palette.primary.main }} className={styles.sidebar}>
      <hr className={styles.divider} />
    </div>
  )
}