How to pass custom props to Material-UI component using makeStyles/withStyles?

Question

How can I pass a custom props to MUI component? Let's say I want pass customProps='red' which changes the background color of a component?

In my case I need to add a different background color for a button and I want to add something like this:

<SubmitButton
  variant={"outlined"}
  customBackground={'red'} // this prop
>
  Submit
</SubmitButton>

Should I use makeStyles?

Here's the codesandbox.

Answer 1

In your styles defined with withStyles

root: {
  backgroundColor: (props) => props.customBackground
  {...}
},

Then in the component created by withStyles HOC:

<SubmitButton customBackground="red"

If you want to set a group of style properties, you can pass a callback that returns a style object instead of a value (docs):

root: ({ mode }) => ({
  ...(mode === "dark" && {
    backgroundColor: "black",
    color: "lightgray",
    "&:hover": {
      backgroundColor: "darkblue"
    }
  }),
  ...(mode === "light" && {
    backgroundColor: "white",
    color: "black",
    "&:hover": {
      backgroundColor: "lightblue"
    }
  }),
})

Then pass the prop in your custom component to apply dynamic styles:

<SubmitButton mode="light">light</SubmitButton>
<SubmitButton mode="dark">dark</SubmitButton>

Should I use makeStyles?

makeStyles and withStyles are the same except that makeStyles returns a hook which cannot be used in a class component. If you use functional component, you should use makeStyles because it's more pluggable (easier to add or remove styles).