Material UI：在 React 类组件中使用主题答案

【问题标题】：Material UI: Use theme in React Class ComponentMaterial UI：在 React 类组件中使用主题
【发布时间】：2020-06-24 18:23:18
【问题描述】：

我正在寻找类似 ThemeConsumer 的东西（可能不存在）。我有 React 组件，我正在使用 withStyles() 高阶组件来注入自定义样式。 documentation 中描述得很好，但我没有找到任何使用主题的示例。

我有一些包含 ThemeProvider 的基本组件。这意味着任何 MUI 组件都受到它的影响。

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = getTheme(prefersDarkMode);
return (
   <ThemeProvider theme={theme}>
      ...
   </ThemeProvider>
)

我还使用makeStyles() 的一些功能组件来创建具有提供主题的样式。

const useStyles = makeStyles(theme => ({
   // here I can use theme provided by ThemeProvider
});

但不能在类组件中使用。所以我使用withStyles() HOC。

const styles = {
   // I would like to use here provided theme too
}
export default withStyles(styles)(SomeComponent);

我的问题总结：
如何在类组件中使用提供的主题？

【问题讨论】：

我在谷歌搜索“ThemeConsumer”后来到这里:)

标签： reactjs material-ui

【解决方案1】：

使用withTheme HOC

来自docs的修改示例

import { withTheme } from '@material-ui/core/styles';

class DeepChildRaw 
{
 /*...*/
  render()
  {
    return <span>{`spacing ${this.props.theme.spacing}`}</span>;
  }
}

const DeepChild = withTheme(DeepChildRaw);

【讨论】：

【解决方案2】：

用withStyles(styles) 装饰的组件会注入一个特殊的classes 属性，它可以用于您的自定义样式。例如：

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

const styles = theme => ({
  myCustomClass: {
    color: theme.palette.tertiary.dark
  }
})

class myComponent extends Component {
  render() {
    const { classes, theme } = this.props
    // In last line, you see we have passed `{ withTheme: true }` option
    // to have access to the theme variable inside the class body. See it
    // in action in next line.

    return <Box className={classes.myCustomClass} padding={theme.spacing(4)} />
  }
}

export default withStyles(styles, { withTheme: true })(myComponent)

如果您将{ withTheme: true } 选项传递给withStyles HOC，您还将获得作为道具注入的主题变量。

如果你有其他 HOC（例如 Redux 的 connect、Router 等）应用于你的组件，你可以这样使用它：

export default withStyles(styles, { withTheme: true })(
   withRouter(connect(mapStateToProps)(myComponent))
)

关于这个话题的更全面的解释可以在这篇文章中找到：Using Material UI theme variable in React Function and Class Components。

【讨论】：

【解决方案3】：

withStyles 支持与makeStyles 类似的语法：

const styles = theme => ({
   // here I can use theme provided by ThemeProvider
});
export default withStyles(styles)(SomeComponent);

这是一个简单的工作示例：

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

const StyledPaper = withStyles(theme => ({
  root: {
    backgroundColor: theme.palette.secondary.main
  }
}))(Paper);
export default function App() {
  return (
    <StyledPaper className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </StyledPaper>
  );
}

【讨论】：