Question

这个问题的目的是了解幕后发生的事情。每次使用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>>;

Answer 1

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

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 options，useStyles函数知道一个index，以后将用来确定这些样式相对于其他样式在样式表的<head>中的位置其他调用makeStyles / useStyles生成的工作表。
副作用：增加global counter，该值用于确定<head>生成的样式表的makeStyles/useStyles中的索引。

useStyles

概述：这是makeStyles返回的函数。应该从函数组件内部调用它，以获得下面描述的classes对象。
可选输入：props对象
- 如果传递了，通常是它所使用的功能组件的props。然后，它将作为参数传递给任何值是函数的样式规则。
- 您可以在以下答案中看到使用此示例：
输出：classes对象
- 此对象将样式对象中的每个样式规则名称映射到生成的CSS类名称。然后，您可以在组件渲染中利用classes.rulename将CSS类应用于元素。
副作用：在<head>的DOM中添加一个样式表，其中包含每个样式规则的CSS类。

主要工作发生的地方

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

呼叫attach。 attach function执行以下关键步骤：
- 调用stylesCreator.create获取样式对象。
- 根据您的样式对象利用JSS至create a style sheet。 JSS也在其中生成将在classes对象中使用的类名。
- Attaches将此样式表放入<head>中适当位置的DOM。
Returns the classes object
如果碰巧触发了重新创建CSS的操作或卸载了组件，则会调用detach来删除先前生成的样式表。

Answer 2

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

参数

样式（函数|对象）：生成样式或样式对象的函数。它将链接到组件。如果您需要访问主题，请使用功能签名。它是第一个参数。
选项（对象[可选]）： 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} />;  
}

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

2 个答案:

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

主要工作发生的地方