Menu
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.
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.
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>>;
673
In order to use makeStyles function in your application you will need to import it in the component in where you plan to access the css that results from your makeStyles function. This is assuming you have already installed Material Ui in your project. This is in order for react to recognize it as a styles file.
you can use ThemeProvider to do that.. all you've to do is create a default theme with createTheme() then use that in ThemeProvider to pass it to all components in tree below ThemeProvider.. just use ThemeProvider to wrap your root component and that will provide default theme to each makeStyles that are currently in ...
@mui/styles is the legacy styling solution for MUI. It is deprecated in v5.
We must install the Material-UI to access its different functionalities or components. Open your terminal, and ensure that you are inside your application's master folder. Type npm install @material-ui/core in the terminal and click enter. Run the command below to use Material-UI icons in our project.
makeStyles
useStyles) that will be used from within a function component.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.useStyles function
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.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.<head> of style sheets generated by makeStyles/useStyles.useStyles
makeStyles. It should be called from within a function component to get a classes object described below.props object
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.classes object
classes.rulename in your component rendering to apply that CSS class to an element.<head> containing a CSS class per style rule.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:
classes object.<head>.
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
