在React Material-UI中“ makeStyles”的内部实现?

时间:2019-07-26 12:27:19

标签: reactjs material-ui

这个问题的目的是了解幕后发生的事情。每次使用makeStyles()找到代码时,我都会感觉自己只是在进行纯复制粘贴,而不了解幕后发生的事情。所以我想在这里发布一个问题,以便有人可以帮助我。

我已经在许多React应用程序中看到以下类型的代码。我很想知道当我们打电话给makeStyles()时发生了什么。因此,我跳入了它的定义,但我不明白它的含义。有人可以帮助我了解如何阅读/理解它。

我在这里了解到的是我正在传递一个名为theme的参数的函数。通过该函数后,我不知道发生了什么。我也很高兴有人能帮助我解决这个问题。

// Calling makeStyles()
const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
  },
  drawer: {
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0,
    },
  },
  appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  menuButton: {
    marginRight: theme.spacing(2),
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
}));

//definition of makeStyles()
import { Theme as DefaultTheme } from './createMuiTheme';
import { Styles, WithStylesOptions } from '@material-ui/styles/withStyles';
import { StylesHook } from '@material-ui/styles/makeStyles';

export default function makeStyles<
  Theme = DefaultTheme,
  Props extends {} = {},
  ClassKey extends string = string
>(
  styles: Styles<Theme, Props, ClassKey>,
  options?: WithStylesOptions<Theme>,
): StylesHook<Styles<Theme, Props, ClassKey>>;

2 个答案:

答案 0 :(得分:0)

输入/输出/副作用的高级视图

makeStyles

  • 概述:此函数通常在JavaScript文件的顶层调用(而不是从组件/函数内部调用),并且它返回一个函数(通常称为useStyles),该函数将在功能组件。
  • 输入:样式对象或样式对象创建者函数
    • 如果输入是一个对象,则假定该对象的每个属性都定义了一个样式规则。属性名称是规则名称,属性值是具有CSS属性和/或嵌套规则的对象。每个样式规则稍后将用于生成CSS类。
    • 如果输入是一个函数,则假定它是一个接收主题作为参数然后返回一个样式对象的函数,该对象具有在输入是对象的情况下描述的结构。
    • makeStyles function declaration中,此输入称为stylesOrCreator。然后,getStylesCreator function将该对象归一化为具有create属性的对象,该属性指向将返回样式对象的函数。
  • 输出:useStyles函数
    • makeStyles开发的函数returned通常称为useStyles,是custom hook。这意味着只能从函数组件和must be called unconditionally中调用它。
    • 在返回此useStyles函数时,几乎没有发生任何事情。该函数知道其stylesCreator,但尚未使用它。通过stylesCreator's optionsuseStyles函数知道一个index,以后将用来确定这些样式相对于其他样式在样式表的<head>中的位置其他调用makeStyles / useStyles生成的工作表。
  • 副作用:增加global counter,该值用于确定<head>生成的样式表的makeStyles/useStyles中的索引。

useStyles

  • 概述:这是makeStyles返回的函数。应该从函数组件内部调用它,以获得下面描述的classes对象。
  • 可选输入:props对象
  • 输出:classes对象
    • 此对象将样式对象中的每个样式规则名称映射到生成的CSS类名称。然后,您可以在组件渲染中利用classes.rulename将CSS类应用于元素。
  • 副作用:在<head>的DOM中添加一个样式表,其中包含每个样式规则的CSS类。

主要工作发生的地方

当您调用useStyles函数时,发生了很多魔术。函数的开头是here。这是它执行的关键步骤:

答案 1 :(得分:0)

makeStyles(styles,[options])=>钩子 使用挂钩模式将样式表与功能组件链接。

参数

  1. 样式(函数|对象):生成样式或样式对象的函数。它将链接到组件。如果您需要访问主题,请使用功能签名。它是第一个参数。

  2. 选项(对象[可选]): options.defaultTheme(对象[可选]):

    1。如果未通过主题提供程序提供主题,则使用默认主题。

    1. options.name(字符串[可选]):样式表的名称。对...有用 调试。如果未提供该值,它将尝试回退到名称 的组件。
    2. options.flip(布尔值[可选]):设置为false时,此工作表将选择- 退出rtl转换。设置为true时,样式相反。什么时候 设置为null,则遵循theme.direction。

    其他键转发到的options参数 jss.createStyleSheet([styles], [options]).。 退货 钩子:钩子。该挂钩可以在功能组件中使用。该文档通常将此返回的钩子useStyles称为。它接受一个参数:样式表中用于“插值”的属性。

示例

import React from 'react';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles({
  root: {
    backgroundColor: 'red',
    color: props => props.color,
  },
});

export default function MyComponent(props) {
   const classes = useStyles(props);
   return <div className={classes.root} />;  
}