发表新帖
发表新帖

Internal implementation of “makeStyles” in React Material-UI?

后端 未结
关注
2 1358
故里飘歌
故里飘歌 2020-12-02 00:11

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

相关标签:
2条回答
  • 爱一瞬间的悲伤
    2020-12-02 00:49

    makeStyles(styles, [options]) => hook Link a style sheet with a function component using the hook pattern.

    Arguments

    1. styles (Function | Object): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument.

    2. options (Object [optional]): options.defaultTheme (Object [optional]):

      1.The default theme to use if a theme isn't supplied through a Theme Provider.

      1. options.name (String [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component.
      2. options.flip (Boolean [optional]): When set to false, this sheet will opt- out the rtl transformation. When set to true, the styles are inversed. When set to null, it follows theme.direction.

      The other keys are forwarded to the options argument of jss.createStyleSheet([styles], [options]).. Returns hook: A hook. This hook can be used in a function component. The documentation often calls this returned hook useStyles. It accepts one argument: the properties that will be used for "interpolation" in the style sheet.

    Examples

    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} />;  
}
    0 讨论(0)
  • 终归单人心
    2020-12-02 00:53

    High-level picture of inputs/outputs/side effects

    makeStyles

    • 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.
    • output: useStyles function
      • 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.
    • side effect: increments a global counter that is used to determine the index within the <head> of style sheets generated by makeStyles/useStyles.

    useStyles

    • 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?
    • output: classes object
      • 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.
    • side effect: Adds a style sheet to the DOM in the <head> containing a CSS class per style rule.

    Where the main work occurs

    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:

    • 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>.
    • Returns the classes object
    • If something happens to trigger re-creating the CSS or if the component unmounts, then detach is called to remove the previously generated style sheet.
    0 讨论(0)
 看不清?
提交回复
热议问题