Included with Material-UI are systems for extending the styles of UI components, and extending theme styles that are applied to all components. In this section, you'll learn about using both of these systems.
Making styles
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...
