看起来你遇到的问题是Material UI内置样式和自定义样式的优先级冲突，导致你设置的类没有生效。别担心，我来给你几个可行的解决方案：

方案一：使用withStyles定制Button样式（推荐） #

这是最符合Material UI设计规范的方式，能确保样式优先级足够，不用依赖!important：

1. 先导入需要的模块：

import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

2. 创建一个定制后的StyledButton组件，直接定义启用和禁用状态的样式：

const StyledButton = withStyles({
  root: {
    marginTop: 10, // 把原来的marginTop移到这里统一管理
    backgroundColor: '#ffb303', // 启用状态的背景色
    '&:disabled': {
      backgroundColor: '#cfcfcf', // 禁用状态的背景色
      opacity: 1, // 移除MUI默认给禁用按钮加的透明度，让灰色更清晰
    },
  },
})(Button);

3. 在你的组件里使用这个定制按钮，简化disabled判断逻辑：

<StyledButton 
  disabled={!this.props.date} // 当date不存在时禁用，存在时启用
  onClick={this.sendRequest} 
  variant="contained"
>
  Send Request
</StyledButton>

方案二：保留自定义类，提升样式优先级 #

如果你想继续使用自己的.enabledButton和.defaultButton，需要提升样式的优先级（因为MUI内置类的优先级更高），可以结合MUI的内置类写更具体的选择器：

修改你的CSS样式：

/* 结合MUI的contained primary类，提升启用状态样式优先级 */
.enabledButton.MuiButton-containedPrimary {
  background: #ffb303 !important;
}

/* 结合MUI的disabled伪类，确保禁用状态样式生效 */
.defaultButton.MuiButton-containedPrimary:disabled {
  background: #cfcfcf !important;
  opacity: 1;
}

然后在按钮组件里根据date状态切换className：

<Button 
  style={{ marginTop: 10 }} 
  disabled={!this.props.date}
  onClick={this.sendRequest} 
  variant="contained"
  color="primary"
  className={this.props.date ? 'enabledButton' : 'defaultButton'}
>
  Send Request
</Button>

为什么原来的方法没生效？ #

MUI的Button组件会自动添加一系列内置CSS类（比如MuiButton-containedPrimary），这些类的优先级比普通自定义类更高。而且当按钮处于disabled状态时，MUI还会给元素添加:disabled伪类的默认样式（包括背景色和透明度），直接加自定义类会被这些内置样式覆盖。

内容的提问来源于stack exchange，提问作者fungieren