Material-UI |在makeStyles中使用`theme`

Question

我正在尝试获取一个muiTheme，通过ThemeProvider 和传递给它的子元素，然后在两个子元素中使用主题的属性在makeStyles创建的类对象中。

具体来说，这些是我拥有的组件/文件：

• 组件LeftSection |呈现Subsection（如下所述）

• muiTheme LefSectionTheme |用于LeftSection

中的类对象中

• 组件RightSection |呈现Subsection

• muiTheme RightSectionTheme

• 组件Subsection

我要做的是在每个组件中添加一个由makeStyles()创建的类对象，每个组件都使用主题的属性。我之所以没有在此处发布代码，是因为我尝试了许多功能组合，并且我认为我对这些功能的工作方式只有一个洞。

所以这里是没有任何类的复制品：LeftSection and RightSection rendering Subsection with their themes-为此，我要添加类。

这是我要使用类的Subsection组件的代码：

import React from "react";
import { useTheme } from "@material-ui/styles";

function Subsection(props) {
  const theme = useTheme();
  return (
    <p
      style={{
        color: theme.palette.primary.main
      }}
    >
      test
    </p>
  );
}

export default Subsection;

我该怎么做？

Answer 1

下面是使用使用此样式主题的类的语法：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  paragraph: {
    color: theme.palette.primary.main
  }
}));
function Subsection(props) {
  const classes = useStyles();
  return <p className={classes.paragraph}>test</p>;
}

export default Subsection;

在没有看到您之前尝试过的代码的情况下，我很难知道您可能在理解上有哪些具体漏洞，因此，如果您对此有特定疑问，我可以添加一些解释/参考。