时间戳

首页 > 解决方案 > React Material-UI 中“makeStyles”的内部实现？

reactjs - React Material-UI 中“makeStyles”的内部实现？

问题描述

这个问题的目的是了解幕后发生的事情。每次我找到代码时，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>>;

标签： reactjsmaterial-ui

解决方案

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

制作样式

  • 概述：此函数通常在 JavaScript 文件的顶层调用（而不是从组件/函数中），它返回一个函数（通常称为useStyles），该函数将在函数组件中使用。
  • 输入：样式对象或样式对象创建函数
    • 如果输入是一个对象，则假定该对象的每个属性都定义了一个样式规则。属性名称是规则名称，属性值是具有 CSS 属性和/或嵌套规则的对象。每个样式规则稍后将用于生成 CSS 类。
    • 如果输入是一个函数，则假定它是一个函数，它接收主题作为参数，然后返回一个样式对象，该对象具有在输入是对象的情况下描述的结构。
    • 在makeStyles 函数声明中，此输入被调用stylesOrCreator。然后由getStylesCreator 函数将其规范化为具有create指向将返回样式对象的函数的属性的对象。
  • 输出：useStyles函数
    • 由返回的函数makeStyles通常被调用useStyles并且是一个自定义钩子。这意味着它只能从函数组件中调用，并且必须无条件调用。
    • 在返回此useStyles函数时，几乎没有发生任何事情。该函数知道它的stylesCreator，但还没有使用它。通过stylesCreator 的 options，该useStyles函数知道index稍后将用于确定<head>这些样式相对于makeStyles/的其他调用生成的其他样式表在样式表中的位置useStyles。
  • 副作用：增加一个全局计数器，该计数器用于确定由<head>生成的样式表中的索引makeStyles/useStyles。

使用样式

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

主要工作发生在哪里

当您调用该useStyles函数时，大部分魔法都会发生。函数的开始在这里。以下是它执行的关键步骤：

推荐阅读