基于材质 ui 类的组件答案

【问题标题】：Material ui class based components基于材质 ui 类的组件
【发布时间】：2020-07-03 10:46:27
【问题描述】：

我在哪里可以找到基于材料 ui 类的组件而不是基于函数的组件，如果可以的话。在哪里写

const classes = useClasses();
const theme = useTheme();

在我的类组件中？

【问题讨论】：

标签： reactjs material-ui jss

【解决方案1】：

useTheme - 它是一个钩子，可以与功能组件一起使用但是，您可以将 withTheme 用于类组件。

参考此链接：https://material-ui.com/styles/advanced/

【讨论】：

【解决方案2】：

您的用例有两个 HoC，即 withStyles 和 withTheme。

用法：

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

const styles = theme => ({
  wrapper: {
    display: "flex",
    // ...
  }
  // ...
})

class ClassComponent extends React.Component {
  // ...

  render() {
    const { classes } = this.props
    // ...
    return (
      <div className={classes.wrapper}>
        {/* ... */}
      </div>
    )
  }
}

export const EnhancedComponent = withStyles(styles)(ClassComponent)

现在您可以渲染EnhancedComponent。

【讨论】：

appBar: { transition: theme.transitions.create(['margin', 'width'] } 现在告诉我无法读取未定义的创建
我已经编辑了我的答案，您可以在 withStyles 中传递一个函数来访问主题并可以在样式中使用。
您可以阅读更多here