Question

设置的关键部分类似于：

 % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1372  100  1318  100    54   2404     98 --:--:-- --:--:-- --:--:--  2409
   17579

和

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

这将更改禁用按钮的常规样式，而不是禁用样式。我怎样才能解决这个问题？也许我定位的课程错误？

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

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

1 个答案: