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

Question

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

Answer 1

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.

   2. 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.
   3. 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 
;  
}