Material-UI comes with a makeStyles() function that can be used to create styles based on JavaScript objects. The return value of this function is a Hook function, which, when used in a component, returns an object with the different style names as properties. There are two ways to use this style object with your Material-UI components:
- The first is to pass the style name to the className property of the component:
const classes = makeStyles({ myStyle: { ... }});
...
<Button className={classes.myStyle} />
This will apply whatever CSS properties that you've defined in myStyle to the Button component. The challenge with this approach is that every Material-UI component has several styles applied to it and it's very easy to mess these up.
- The other approach is to use the classes property. This allows us to structure our styles in a way that follows the style API that's available for each Material-UI component. Let's take a closer look at this approach...
