reactjs - 有没有办法在 Material UI 中扩展 makeStyle 类？

Question

我希望能够实现这样的目标：

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

所以类'selectedButton'仍然会有黑色边框，但背景颜色会改变。

标签： reactjsmaterial-ui

Answer 1

使用makeStyles

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

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

使用withStyles

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

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