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

Question

我使用 createMuiTheme() 制作了 customTheme，并在 <ThemeProvider> 中使用了它。现在，我想在 makeStyles() 函数中使用 customTheme 制作一些自定义样式。但是 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',
        width: '100px',
        backgroundColor: customTheme.palette.primary.main
      }}>
        inline style
      </div>

    </ThemeProvider>
  );
}

截图： Screenshot Image

如屏幕截图所示，第一个 <div> 具有使用 makeStyles.

的 Material-UI 默认深蓝色

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

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

Answer 1

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

Codesandbox Link - https://codesandbox.io/s/mui-custom-theme-f354x

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

How can I use 'theme' made with 'createMuiTheme()' inside 'makeStyles()'?

material-ui

makestyles