如何在“makeStyles()”中使用“createMuiTheme()”制作的“theme”？

问题描述

我使用 customTheme 制作了 createMuiTheme()，并在 <ThemeProvider> 中使用了它。现在，我想使用 customTheme 函数内的 makeStyles() 制作一些自定义样式。但是 makeStyles() 没有得到我的 customTheme。它获取默认主题。

代码：

import React from 'react';

import { createMuiTheme,makeStyles,ThemeProvider } from '@material-ui/core';

const customTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#f0f'
    },}
});

const useStyles = makeStyles((theme) => ({
  Box: {
    height: '100px',width: '100px',backgroundColor: theme.palette.primary.main
  }
}));

export default function App() {

  const classes = useStyles();

  return (
    <ThemeProvider theme={customTheme}>

      <div className={classes.Box}>
        makeStyles
      </div>

      <div style={{
        height: '100px',backgroundColor: customTheme.palette.primary.main
      }}>
        inline style
      </div>

    </ThemeProvider>
  );
}

截图： Screenshot Image

如屏幕截图所示，第一个 <div> 具有使用 makeStyles 的 Material-UI 的默认深蓝色。

第二个 <div> 具有自定义颜色，即使用内联样式。

那么，我如何使用 customTheme 中的 makeStyles()？

解决方法

尝试 ThemeProvider 包裹 App 组件，根据我的理解，提供的主题将应用于包裹在其下的 React 组件。因为“makeStyles div”只是一个元素，样式不适用于它。

代码沙盒链接 - https://codesandbox.io/s/mui-custom-theme-f354x

makestyles material-ui