在内部实现"makeStyles".在React Material-UI中? [英] Internal implementation of "makeStyles" in React Material-UI?

问题描述

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

The purpose of this question is to understand what is happening under the hood. Every time I found the code with makeStyles() I feel that I am just doing a pure copy paste without understanding what is happening under the hood. So I thought of posting a question here so that some one can help me out.

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

I have seen the below kind of code in many React apps. I was so curious to know what is happening when we make a call to makeStyles(). So I jumped into its definition but I am not able to understand what does it mean. Can someone help me understand how to read/understand it.

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

What I understand here is that I am passing a function with parameter named theme. After passing that function I have no clue what is going on. I appreciate if some one help me figure out this as well.

// 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>>;

推荐答案

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

makeStyles

• 概述:此函数通常在JavaScript文件中的顶层调用(不是从组件/函数内部调用)，它返回一个将在函数组件内部使用的函数(通常称为useStyles)
• 输入:样式对象或样式对象创建者函数
  • 如果输入是一个对象，则假定该对象的每个属性都定义了一个样式规则.属性名称是规则名称，属性值是具有CSS属性和/或嵌套规则的对象.每个样式规则稍后将用于生成CSS类.
  • 如果输入是一个函数，则假定它是一个接收主题作为参数然后返回一个样式对象的函数，该对象具有在输入是对象的情况下描述的结构.
  • 在 makeStyles函数声明，此输入称为stylesOrCreator.然后通过
  • overview: This function is typically called at the top-level within a JavaScript file (not from within a component/function), and it returns a function (typically called useStyles) that will be used from within a function component.
  • input: styles object or styles object creator function
    • If the input is an object, it is assumed that each property of the object defines a style rule. The property name is the rule name and the property value is an object with CSS properties and/or nested rules. Each style rule will later be used to generate a CSS class.
    • If the input is a function, it is assumed to be a function that receives the theme as an argument and then returns a styles object with the structure described in the case where the input is an object.
    • In the makeStyles function declaration, this input is called stylesOrCreator. This is then normalized by the getStylesCreator function to be an object with a create property that points at a function which will return a styles object.
    • 函数makeStyles返回的rel ="nofollow noreferrer">返回通常称为useStyles，是必须无条件调用.
    • 在返回此useStyles函数时，几乎没有发生任何事情.该函数知道其 stylesCreator ，但尚未使用.通过
    • The function returned by makeStyles is typically called useStyles and is a custom hook. This means that it can only be called from within a function component and must be called unconditionally.
    • At the point of returning this useStyles function, very little has happened. The function knows about its stylesCreator, but hasn't used it yet. Via the stylesCreator's options, the useStyles function knows an index that will later be used to determine the location in the <head> of the style sheet for these styles relative to the other style sheets generated by other calls to makeStyles/useStyles.

    useStyles

    • 概述:这是makeStyles返回的函数.应该从函数组件内部调用它，以获取如下所述的classes对象.
    • 可选输入:props对象
      • 如果传递，则通常是使用该函数的功能组件的props.然后，它将作为参数传递给任何值是函数的样式规则.
      • 您可以在以下答案中看到使用此示例:
        • 是否将变量发送到Material UI中的withStyles?
        • 使用道具设置& :: hover"背景-颜色
        • 如何使用主题"和道具"在makeStyles中?
        • overview: This is the function returned by makeStyles. It should be called from within a function component to get a classes object described below.
        • optional input: props object
          • If passed, this is typically the props of the function component this is used in. This will then be passed as an argument to any style rules where the value is a function.
          • You can see examples of using this in the following answers:
            • Send Variable to withStyles in Material UI?
            • Using props to set '&:hover' background-color
            • How to use 'theme' and 'props' in makeStyles?
            • 此对象将样式对象中的每个样式规则名称映射到生成的CSS类名称.然后，您可以在组件渲染中利用classes.rulename将该CSS类应用于元素.
            • This object maps each style rule name in your styles object to a generated CSS class name. You can then leverage classes.rulename in your component rendering to apply that CSS class to an element.

            当您调用useStyles函数时，发生了很多不可思议的事情.该函数的开头是此处.这是它执行的关键步骤:

            The bulk of the magic happens when you call the useStyles function. The beginning of the function is here. Here are the key steps it performs:

            • 调用附加. stylesCreator.create 来获取样式对象.
            • 利用 JSS 到将此样式表附加到<head>中适当位置的DOM.
            • Calls attach. The attach function does the following key steps:
              • Calls stylesCreator.create to get your styles object.
              • Leverages JSS to create a style sheet based on your styles object. It is also within here that JSS generates the class names that will be in the classes object.
              • Attaches this style sheet to the DOM at the appropriate location within the <head>.

              这篇关于在内部实现"makeStyles".在React Material-UI中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！