时间戳

首页 > 解决方案 > 我们在哪里可以定义 React 中 Material-UI 的主题

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

问题描述

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

标签： javascriptreactjsstylesmaterial-ui

解决方案

有一个主题提供者，称为ThemeProvider

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

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

然后你可以Theme通过多种方式访问​​上面定义的

例如，对于经典组件，我们有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);
  }
})

推荐阅读