Reactjs 将自定义主题传递到样式中

我已经创建了一个主题，我正试图在useStyles中调用它。这就是主题

import { createMuiTheme } from "@material-ui/core/styles";

const customTheme = createMuiTheme({
    palette: {
        primary: {
            main: "#00ffff"
        },
        secondary: {
            light: "#214b63",
            main: "#000000",
            dark: "#00660f",
            contrastText: "#fff"
        }
    }
});

export default customTheme;

我想使用次颜色作为替代的一部分：

import React from "react";
import { Grid, Typography } from "@material-ui/core";
import { withStyles, MuiThemeProvider } from "@material-ui/core/styles";
import customTheme from "./newTheme";

const useStyles = (theme) => ({
  root: {
    color: theme.palette.secondary.main
  },
  grid: {
    height: "100vh"
  }
});

class CustomThemes extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <MuiThemeProvider theme={customTheme}>
        <Grid
          className={classes.grid}
          container
          justify="center"
          alignItems="center"
        >
          <Grid item>
            <Typography className={classes.root}>
              Upgraded to withStyles theming problem
            </Typography>
          </Grid>
        </Grid>
      </MuiThemeProvider>
    );
  }
}

export default withStyles(useStyles)(CustomThemes);

我试过的另一种方法是

export default withStyles(useStyles, { withTheme: true })(CustomThemes);

---

我也有一个css注入，但我想知道它可以这样做（我相信这是mui固有的方式）。感谢所有的帮助

找到了答案。我不知道这一点，但我可以将主题直接调用到我的useStyles中：

const useStyles = (theme) => ({
  root: {
    color: customTheme.palette.secondary.main
  },
  grid: {
    height: "100vh"
  }
});

如果有人知道我为什么不需要直接插入主题，这将大大有助于理解为什么这样做有效。我花了将近两天的时间来传递这个主题

const useStyles = (theme) => ({
  root: {
    color: customTheme.palette.secondary.main
  },
  grid: {
    height: "100vh"
  }
});