在 makeStyles 中使用自定义主题

Question

我进行了一些研究，但无法找到解决方案。

我正在尝试使用 createMuiTheme 创建一个主题，并稍后在 makeStyles 中使用它来检索里面的键。 （示例中的调色板）但是，自定义主题似乎没有在 makeStyles 中应用。

import React from 'react';
import ReactDOM from 'react-dom';
import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import red from "@material-ui/core/colors/red";

const useStyles = makeStyles(theme => {
  console.log(theme); // Only defaults but not red in palette.
  return {
    root: {
      color: theme.palette.primary[400] // This is not working.
    }
  };
});

function App() {
  const classes = useStyles();
  const theme = createMuiTheme({
    palette: {
      primary: red
    }
  });
  return (
    <ThemeProvider theme={theme}>
      <Button className={classes.root}>Hook</Button>
    </ThemeProvider>
  );
}

但是，在另一个使用 useTheme 的组件中，它可以正常工作。我做错了什么？

const useStyles = makeStyles(theme => {
  console.log(theme); // Here palette includes the new palette.
  return {
    root: {
      color: theme.palette.primary[400]
    }
  };
});

function anotherApp() {
  const classes = useStyles();
  const theme = useTheme(); 
  ...
}

Answer 1

您的自定义主题应用在这一行：<ThemeProvider theme={theme}>，并在此之前调用您的 makeStyles 函数。
这意味着，在这一行 const classes = useStyles(); 你调用你的 makeStyles 函数，但你的主题仍然是默认主题。
解决方案就是您已经做的，创建一个 CustomizedButton 并在其中调用 useStyles 钩子。