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

Question

我有一个自定义的侧边栏组件，我希望它的背景颜色使用Material-UI的主调色板颜色。

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

显然<Sidebar color="primary">不工作。我不知道如何做到这一点。

Answer 1

您可以通过使用HOC或useThemee钩子来访问主题值。

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

从那里，你可以得到主题颜色，并将其传递给Sidebar组件。

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

Answer 2

这就是我在nipuna的建议下使用useTheme()工作的方法。

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>
)
}