Designing unique variations using Material UI

Question

Designing unique variations using Material UI

I am currently exploring the creation of custom variants for the Button component in Material UI.

To start off, I am developing a customized component based on the Button component with specific styles:

// CTA.js

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: { // CUSTOM__STYLES },
  label: { // CUSTOM__STYLES },
});

const CTA = ({ children }) => {
  const classes = useStyles();

  return (
    <Button
      classes={{
        root: classes.root, 
        label: classes.label,
      }}
    >
      {children}
    </Button>
  );
};

Subsequently, I import this component into a new rendition of the Button component that I am constructing as shown below:

// Button.js
import MuiButton from "@material-ui/core/Button";
import CTA from "./CTA";

const Button = ({ variant, ...muiButtonProps }) => {
  if (variant === "cta") {
    return <CTA {...muiButtonProps} />;
  }
  return <MuiButton {...muiButtonProps} />;
};

The goal is to be able to utilize my newly created Button component just like a standard Material-UI button component but with an additional variant="cta". However, it seems to be experiencing some hurdles.

For instance, refer to the following scenario:

// Header.js
import { Button as MuiButton } from "@material-ui/core";
import { Button } from "@/theme/button.js";

...

<MuiButton variant="outlined">Mui Button</MuiButton>  // functions correctly
<Button variant="outlined">Button</Button> // does not function as intended
<Button variant="cta">CTA Button</Button>  // works fine

While my personalized Button component operates with variant="cta", it fails to do so when employing any of the predefined Material-UI variant options. The reason behind this discrepancy eludes me. I assumed that

<Button variant="outlined">

would behave similarly to

<MuiButton variant="outlined">

. However, this is not the case.

Any insights on why this may be happening and how to rectify it?

javascript reactjs material-ui

Answer 1

Answer №1

In the latest version of Material-UI (v5), you have the ability to effortlessly create custom variants for your components. This eliminates the need for creating wrapper components, making the process much simpler. Check out the list of supported components in this RFC. See below for a basic example:

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            textTransform: 'none',
            border: `2px dashed grey${blue[500]}`,
          },
        },
      ],
    },
  },
});

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="outlined">
        Outline
      </Button>
      <Button variant="dashed">
        Dashed
      </Button>
    </ThemeProvider>
  );
}

If you are using typescript, make sure to update the variant definition through module augmentation.

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    dashed: true;
  }
}

Live Demo

https://codesandbox.io/s/2b8sh?file=/demo.js

Answer 2

In the latest version of Material-UI (v5), you have the ability to effortlessly create custom variants for your components. This eliminates the need for creating wrapper components, making the process much simpler. Check out the list of supported components in this RFC. See below for a basic example:

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            textTransform: 'none',
            border: `2px dashed grey${blue[500]}`,
          },
        },
      ],
    },
  },
});

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="outlined">
        Outline
      </Button>
      <Button variant="dashed">
        Dashed
      </Button>
    </ThemeProvider>
  );
}

If you are using typescript, make sure to update the variant definition through module augmentation.

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    dashed: true;
  }
}

Live Demo

https://codesandbox.io/s/2b8sh?file=/demo.js

Answer 3

Answer №2

There are two possible options for solving this issue: you may find that it is not working because you are destructing the "variant" without forwarding it to your MuiButton component.

To address this problem, consider implementing the following changes in your Button.js file:

const Button = ({ variant, ...muiButtonProps }) => {
  if (variant === "cta") {
    return <CTA {...muiButtonProps} />;
  }
  return <MuiButton variant={variant} {...muiButtonProps} />;
};

Alternatively, you can also try this approach:

const Button = (muiButtonProps) => {
  if (muiButtonProps.variant === "cta") {
    return <CTA {...muiButtonProps} />;
  }
  return <MuiButton {...muiButtonProps} />;
};

For more information on destructuring assignments in JavaScript, refer to the documentation at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Answer 4

There are two possible options for solving this issue: you may find that it is not working because you are destructing the "variant" without forwarding it to your MuiButton component.

To address this problem, consider implementing the following changes in your Button.js file:

const Button = ({ variant, ...muiButtonProps }) => {
  if (variant === "cta") {
    return <CTA {...muiButtonProps} />;
  }
  return <MuiButton variant={variant} {...muiButtonProps} />;
};

Alternatively, you can also try this approach:

const Button = (muiButtonProps) => {
  if (muiButtonProps.variant === "cta") {
    return <CTA {...muiButtonProps} />;
  }
  return <MuiButton {...muiButtonProps} />;
};

For more information on destructuring assignments in JavaScript, refer to the documentation at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Answer 5

Answer №3

If you're looking to customize a specific mui component globally using version 5, the code snippet would look similar to this:

 const globalTheme = createTheme({
 components:{
    MuiTableCell:{
      styleOverrides:{
        root:{
          color: "blue"
        }
      }
    }
  },
});

Answer 6

If you're looking to customize a specific mui component globally using version 5, the code snippet would look similar to this:

 const globalTheme = createTheme({
 components:{
    MuiTableCell:{
      styleOverrides:{
        root:{
          color: "blue"
        }
      }
    }
  },
});

Answer 7

Answer №4

Expanding on the previous responses from NearHuscarl and Yassine CHABLI, if you need to customize a component that doesn't currently support custom variants, you can still modify the style based on a prop value. I recently encountered this situation when I wanted to apply the variant 'largeText' to my MuiTooltips.

You have the option to utilize functions as the styleOverride, which receives an object containing ownerState with all the props passed at the top level.

For more information, refer to these resources: https://mui.com/material-ui/customization/theme-components/

A simplified version of the code snippet is shown below:

const theme = createTheme({
  components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: ({ ownerState }) => {
          if (ownerState?.variant === 'largeText') {
            return { fontSize: 16 };
          }
          return {};
        },
      },
    },
  },
});

Answer 8

Expanding on the previous responses from NearHuscarl and Yassine CHABLI, if you need to customize a component that doesn't currently support custom variants, you can still modify the style based on a prop value. I recently encountered this situation when I wanted to apply the variant 'largeText' to my MuiTooltips.

You have the option to utilize functions as the styleOverride, which receives an object containing ownerState with all the props passed at the top level.

For more information, refer to these resources: https://mui.com/material-ui/customization/theme-components/

A simplified version of the code snippet is shown below:

const theme = createTheme({
  components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: ({ ownerState }) => {
          if (ownerState?.variant === 'largeText') {
            return { fontSize: 16 };
          }
          return {};
        },
      },
    },
  },
});

Designing unique variations using Material UI

Answer №1

Live Demo

Answer №2

Answer №3

Answer №4

Similar questions

Error encountered while making an http get request for a node that returns JSON

Changing characters to asterisks using Javascript

What is the process for adjusting the form transition?

Leveraging a VueJS prop as a variable in an array mapping operation

Here is a helpful guide on updating dropdown values in real time by retrieving data from an SQL database

Is there a way to retrieve data from my JSON file located in the public folder within Next.js 13.3?

The startAdornment MUI ensures that the label is consistently displayed at the top

Which file from Next.js should I statically serve using Node?

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to access an SD card by clicking on an HTML link using JavaScript?

Monitor Socket IO for client disconnection events

Node.js Express not inserting data with Mongoose when using form data

Selecting radio button does not update corresponding label

Styled-Component: Incorporating Variables into Styled-Component is my goal

Error message: Unable to render content from layout.js in index.js due to unspecified

Prompt for confirmation in ASP.NET code-behind with conditions

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

What is the best way to stylize a date using Bootstrap-datepicker?

Sending data from a React client to an Express server using a POST

Can an AJAX upload progress bar be implemented in Internet Explorer without using Flash?