React Material UI：禁用时如何为按钮提供自定义颜色

使用React Material UI，我们可以轻松地创建漂亮的用户界面，其中包括按钮元素。在某些情况下，我们可能需要禁用按钮，并且还希望根据我们的需求为禁用状态的按钮提供自定义颜色。在本文中，我们将探讨如何使用React Material UI为禁用按钮提供自定义颜色，并附带一个实际的案例代码。

npm install @material-ui/core

jsx
import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
  disabledButton: {
    backgroundColor: 'red', // 自定义禁用状态下的按钮颜色
    color: 'white', // 自定义禁用状态下的按钮文字颜色
    '&:hover': {
      backgroundColor: 'red', // 自定义禁用状态下的按钮悬停颜色
    },
  },
}));
const CustomButton = () => {
  const classes = useStyles();
  return (
          variant="contained"
      color="primary"
      disabled
      classes={{ disabled: classes.disabledButton }}
    >
      禁用按钮
    
  );
};
export default CustomButton;

jsx
import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
  disabledButton: {
    backgroundColor: 'red',
    color: 'white',
    '&:hover': {
      backgroundColor: 'red',
    },
  },
}));
const CustomButton = () => {
  const classes = useStyles();
  return (
          variant="contained"
      color="primary"
      disabled
      classes={{ disabled: classes.disabledButton }}
    >
      禁用按钮
    
  );
};
export default CustomButton;