Source:  Twitter logo

The key parts of the setup are similar to:

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

And

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

This changes the regular style of the disabled button rather than the disabled style. How can I fix this? Maybe I'm targeting the wrong class?

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);
4 users liked answer #0dislike answer #04
Garry profile pic
Garry

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

0 users liked answer #1dislike answer #10
Ivan K. profile pic
Ivan K.

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).