Is there a way to extend makeStyle classes in Material UI?

Question

I want to be able to achieve something like this:

const useStyles = makeStyles((theme) => ({
  button: {
    backgroundColor: 'red',
    border: 'black solid 5px',
  },
  selectedButton: {
    extend: 'button',
    backgroundColor: 'yellow'
  }
}))

So class 'selectedButton' would still have a black border but the background color will change.

user_3212379 · Answer

Using makeStyles

const button = {
  backgroundColor: "red",
  border: "black solid 5px",
};

const useStyles = makeStyles({
  button,
  selectedButton: {
    ...button,
    backgroundColor: "yellow"
  }
});

Using withStyles

const StyledButton = withStyles({
  root: {
    backgroundColor: "red",
    border: "black solid 5px"
  }
})(Button);

const SelectedButton = withStyles({
  root: {
    backgroundColor: "yellow"
  }
})(StyledButton);

Is there a way to extend makeStyle classes in Material UI?

1 Answers