Muhi Logo Text
Work With MeAboutTestimonialsBlog

How to Create and Customize Variants with Material UI (MUI)

Learn how to override and add a new variant with Material UI and React

Last updated on February 07, 2023

react
mui
MUI Custom Variant

variant is a built-in property used in MUI components. Its primary usage is to provide different look and feel options to fulfill the products’ branding and design. For example, a Button can have an “outlined” or “contained” variant.

Button Variants

Or a Text Field can have an “outlined” or “filled” variant.

Button Variants

In this article, we’ll learn how to create a custom variant and override an existing one. We’ll use the Button component as an example, but a variant prop is also available in the Text Field and other components.

If you’d like to skip all the details, below is the complete code example:

If this is your first time working with MUI, please follow the installation instructions from the official documentation to get started.

Override a variant

creatTheme provides specific component customization using the styleOverrides key. Then we can add the component and variant we’re trying to customize, in our case, MuiButton and container.

import { ThemeProvider, createTheme } from "@mui/material/styles";
import { Button } from "@mui/material";
const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        contained: {
          padding: "10px 20px",
          fontSize: "16px",
          fontWeight: "500"
        }
      }
    }
  }
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">contained</Button>
    </ThemeProvider>
  );
}

We can even be more selective and customize the variant with a specific color (e.g., primary or secondary).

import { ThemeProvider, createTheme } from "@mui/material/styles";
import { Button } from "@mui/material";
import { purple } from "@mui/material/colors";
const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        contained: {
          padding: "10px 20px",
          fontSize: "16px",
          fontWeight: "500"
        },
        containedSecondary: {
          background: purple[300]
        }
      }
    }
  }
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">contained</Button>
      <Button variant="contained" color="secondary">
        contained secondary
      </Button>
    </ThemeProvider>
  );
}

Here are the new updated styles:

Button Variants

Create a new variant

Similar to the first section, we’ll need to customize MuiButton but this time using the variants key to add and style a custom one.

Let’s create a new variant that adds a gradient to the background color.

import { ThemeProvider, createTheme } from "@mui/material/styles";
import { Button } from "@mui/material";
import { blue } from "@mui/material/colors";

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: "gradient" },
          style: {
            background: `linear-gradient(45deg, ${blue[700]} 35%, ${blue[300]} 90%)`,
            color: "#fff"
          }
        }
      ]
    }
  }
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="gradient">primary gradient</Button>
    </ThemeProvider>
  );
}

As seen above, when adding a custom variant, we can name and style the variant however we see fit. Additionally, props has a color option that we can use to style the variant with a specific color palette. Let’s try it for both primary and secondary colors.

import { ThemeProvider, createTheme } from "@mui/material/styles";
import { Button } from "@mui/material";
import { blue, purple } from "@mui/material/colors";

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: "gradient", color: "primary" },
          style: {
            background: `linear-gradient(45deg, ${blue[700]} 35%, ${blue[300]} 90%)`,
            color: "#fff"
          }
        },
        {
          props: { variant: "gradient", color: "secondary" },
          style: {
            background: `linear-gradient(45deg, ${purple[700]} 35%, ${purple[300]} 90%)`,
            color: "#fff"
          }
        }
      ]
    }
  }
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="gradient">primary gradient</Button>
      <Button variant="gradient" color="secondary">
        secondary gradient
      </Button>
    </ThemeProvider>
  );
}

Button Variants

Summary

variant is a very useful option that MUI provides out of the box, and with the latest MUI 5 version, the team has done a fantastic job of making the theme more extensible and easier to customize.

Bye for now 👋

If you enjoyed this post, I regularly share similar content on Twitter. Follow me @muhimasri to stay up to date, or feel free to message me on Twitter if you have any questions or comments. I'm always open to discussing the topics I write about!

Recommended Reading

Learn how to create a responsive and user-friendly table on mobile and tablet devices using React

react
html

Discussion

Upskill Your Frontend Development Techniques 🌟

Subscribe to stay up-to-date and receive quality front-end development tutorials straight to your inbox!

No spam, sales, or ads. Unsubscribe anytime you wish.

© 2024, Muhi Masri