禁用按钮的自定义样式也适用于常规按钮

Question

设置的关键部分与：

const styles = theme => ({
  disabledButton: {
    borderColor: "#fff"
  }
}); 

和

<Button
  variant="contained"
  color="secondary"
  disabled
  classes={{ disabled: classes.disabledButton }}
>
  Disabled
</Button>

这更改了禁用按钮的常规样式，而不是禁用样式。我怎样才能解决这个问题？也许我是针对错误的班级？

Answer 1

import React, {useState} from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const styles = theme => ({
  button: {
    ":disabled": {
      backgroundColor: "red"
    }
  }
});
function ContainedButtons(props) {
  const [disable, setDisable] = useState(false);
  const { classes } = props;
  const changeDisableState = () => {
    setDisable(!disable);
  };
  return (
    <div>
      <Button
        variant="contained"
        color="secondary"
        disabled={disable}
        className={{dsiable: classes.button}}
      >
        Disabled
      </Button>
      <Button
        variant="contained"
        color="secondary"
        onClick={changeDisableState}
      >
        Enable/Disable
      </Button>
    </div>
  );
}
ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ContainedButtons);

Answer 2

如果您的样式文件(例如SCSS(例如globalstyle.module.scss

.appointmentBtn {
  border: 1px solid #ebebeb;
  &:hover {
    border: 1px solid #a120d1 !important;
  }
  &:disabled {
    border: 1px solid #ebebeb;
  }
}

下一个

   <Button
        variant="outlined"
        disabled={ 'your logic there' }
        className={classes.appointmentBtn}
        onClick={handleClick}
      >
        Some text
   </Button>

对于任何条件，边框的颜色都相同