Где мы можем определить тему для Material-UI в React - PullRequest
Новая
       54

Где мы можем определить тему для Material-UI в React

1 голос
/ 22 марта 2020

Я запутался при настройке стиля для 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}/>
  );
}

1 Ответ

1 голос
/ 22 марта 2020

Существует поставщик темы, так называемый ThemeProvider 

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

Это обеспечивает тему для дочерних компонентов, мы обычно определяем это на верхнем уровне проекта .

Затем вы можете получить доступ к Theme, определенному выше, несколькими способами

Например, для классического компонента у нас есть withTheme HO C

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