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

Question

我在为基于 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}/>
  );
}

Answer 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);
  }
})

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

Where can we define the Theme for Material-UI in React

javascript

styles

reactjs

material-ui