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

Question

我正在尝试采用 muiTheme，通过 ThemeProvider 和 将其传递给组件，然后使用这两个主题的属性都在由 makeStyles 创建的类对象中。

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

• 组件 LeftSection |呈现 Subsection(如下所述)

• muiTheme LefSectionTheme |在 LeftSection

中的类对象中使用

• 组件 RightSection |呈现 Subsection

• muiTheme RightSectionTheme

• 组件小节

我想做的是在每个组件中添加一个由 makeStyles() 创建的类对象，并且每个组件都使用主题的属性。我没有在这里发布代码，因为我尝试了很多函数的组合，我想我只是对其中一些函数的工作方式的理解存在漏洞。

所以这是没有任何类的复制品:LeftSection and RightSection rendering Subsection with their themes - 我想为此添加类(class)。

这是我要使用类的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;

没有看到你之前尝试过的代码，我很难知道你的理解可能有什么具体的漏洞，所以如果你对此有具体的问题，我可以添加更多的解释/引用。