Custom style for disabled button applies to regular button also

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);

If you have a style file like scss for example globalStyle.module.scss

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

next

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

the color of the border will be the same for any condition