reactjs - 禁用和启用按钮的样式

Question

我有一个按钮(来自 Material 用户界面)，如果未设置日期，该按钮将显示为灰色。如果您设置了日期，它应该是可点击的。我想为这些情况设置按钮的样式。

这是按钮:

<Button style={{
      marginTop: 10
    }} disabled={this.props.date ? false : true} onClick={this.sendRequest} variant="contained" color="primary">Send Request</Button>

这些是我的样式按钮类:

'.enabledButton': {
        background: '#ffb303!important',
    },
    '.defaultButton': {
        background: '#cfcfcf!important',
    },

我尝试将其应用于假/真检查。如果为 true，则应应用 .enabledButton；如果为 false，则应应用 .defaultButton。

有人可以帮我吗？非常感谢!

Answer 1

1. 您可以override css由 Material ui 注入(inject)
2. 您可以使用rule name

working demo here 中涵盖了这两个选项

代码片段

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    },
    // using classname
    "& .Mui-disabled": {
      background: "#ffb303"
    }
  }
}));
const useStyles2 = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    },

    "&$disabled": {
      background: "rgba(0, 0, 0, 0.12)",
      color: "red",
      boxShadow: "none"
    }
  },
  disabled: {}
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  const classes2 = useStyles2();

  return (
    <>
      <div className={classes.root}>
        <Button
          variant="contained"
          color="primary"
          disabled={props.date ? false : true}
        >
          Button (using css name)
        </Button>
      </div>

      <div>
        <Button
          classes={{ root: classes2.root, disabled: classes2.disabled }}
          variant="contained"
          color="primary"
          disabled={props.date ? false : true}
        >
          Button (using rule name)
        </Button>
      </div>
    </>
  );
}