我们在哪里可以定义 React 中 Material-UI 的主题答案

【问题标题】：Where can we define the Theme for Material-UI in React我们在哪里可以定义 React 中 Material-UI 的主题
【发布时间】：2020-03-22 09:32:54
【问题描述】：

在为基于 Material-UI 的前端设置样式时我很困惑。

下面的示例代码中theme来自哪里，主题的效果是什么？

import React from "react";
import Container from "@material-ui/core/Container";

const useStyles = makeStyles(theme => ({
  root: {
    height: "100%"
  }
}));

const Sample = props => {
  const classes = useStyles();
  return (
    <Container className={classes.root}/>
  );
}

【问题讨论】：

标签： javascript reactjs styles material-ui

【解决方案1】：

有一个主题提供者称为ThemeProvider

material-ui的文档theming
更多自定义用法advanced theming

<ThemeProvider theme={outerTheme}>
  <Checkbox defaultChecked />
  <ThemeProvider theme={innerTheme}>
    <Checkbox defaultChecked />
  </ThemeProvider>
</ThemeProvider>

它为子组件提供主题，我们通常在项目的顶层定义它。

那么你可以通过多种方式访问上面定义的Theme

accessing-the-theme-in-a-component

例如，对于经典组件，我们有 withTheme HOC

import { withTheme } from '@material-ui/core/styles';
function DeepChildRaw(props) {
  return <span>{`spacing ${props.theme.spacing}`}</span>;
}
const DeepChild = withTheme(DeepChildRaw);

对于功能组件，我们有 useTheme 钩子

import { useTheme } from '@material-ui/core/styles';
function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

您可以在 makeStyles 和 createStyles 中正常使用它们

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
  root: {
    width: theme.spacing(1);
  }
}));

import { createStyles } from '@material-ui/core/styles';
const styles = (theme: Theme) => createStyles({
  root: {
    width: theme.spacing(1);
  }
})

【讨论】：