Revision history [back]

To personalize various features in React MUI, you can use the makeStyles hook to define custom styles for components. Here are the steps:

1. Import the makeStyles hook from the MUI core styles module:

   import { makeStyles } from "@mui/styles";
   

2. Define your custom styles using the makeStyles hook. You can define styles for various components, such as buttons, typography, etc. Here's an example:

   const useStyles = makeStyles((theme) => ({
    button: {
      backgroundColor: "red",
      color: "white",
    },
    title: {
      fontWeight: "bold",
    },
   }));
   

3. Apply the custom styles to your components using the useStyles hook. Here's an example of how to apply the custom styles to a button and a typography component:

   const classes = useStyles();
   
   const App = () => {
    return (
      <div>
        <Button variant="contained" className={classes.button}>
          Click me
        </Button>
        <Typography variant="h1" className={classes.title}>
          My heading
        </Typography>
      </div>
    );
   };
   

4. You can also override the default MUI styles using the same approach. Simply target the class that MUI uses for the component, and provide your custom styles:

   const useStyles = makeStyles((theme) => ({
    button: {
      backgroundColor: "red",
      color: "white",
      "&:hover": {
        backgroundColor: "purple",
      },
    },
    // override the default MUI styles for the h1 component
    h1: {
      fontSize: "3rem",
      fontWeight: "bold",
      color: "blue",
    },
   }));
   

Note: always check the latest version of MUI documentation for syntax or API changes.