如何使用Material UI修改禁用按钮的文本颜色？

用户代码示例：

<Button variant="text" disabled sx={{
  border: '1px solid black',
  '&:disabled': {
    color: 'green'
  }
}}>
  <Typography sx={{
    color: 'red',
    '&:disabled': {
      color: 'green'
    }
  }}>Some text</Typography>
</Button>

问题描述：尝试通过Button和Typography的sx属性设置禁用状态下的文本颜色为绿色，但两种配置均未生效，项目限制无法使用.css文件，求解决方法。

核心原因 #

Typography本身不是可禁用的表单元素，不会触发:disabled伪类；Button的禁用状态会给自身添加.Mui-disabled类，且默认样式优先级高于子元素的内联样式，导致直接设置的样式被覆盖。

可行方案 #

方案1：通过Button的sx属性，利用后代选择器指定禁用状态下的Typography样式

直接在Button的&.Mui-disabled选择器内，选中内部的Typography组件（通过.MuiTypography-root类）设置颜色：

<Button variant="text" disabled sx={{
  border: '1px solid black',
  '&.Mui-disabled': {
    '& .MuiTypography-root': {
      color: 'green'
    }
  }
}}>
  <Typography sx={{ color: 'red' }}>Some text</Typography>
</Button>

方案2：给Typography添加自定义类名，提高选择器针对性

给Typography设置自定义类名，再在Button的禁用样式中选中该类：

<Button variant="text" disabled sx={{
  border: '1px solid black',
  '&.Mui-disabled': {
    '& .disabled-green-text': {
      color: 'green'
    }
  }
}}>
  <Typography sx={{ color: 'red', className: 'disabled-green-text' }}>Some text</Typography>
</Button>

方案3：使用MUI的styled API创建自定义Typography组件

借助MUI的styled工具创建带禁用状态样式的Typography，无需额外css文件：

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const StyledTypography = styled(Typography)({
  color: 'red',
  // 选中父元素为禁用状态的Button时，修改自身颜色
  '.MuiButton-root.Mui-disabled &': {
    color: 'green'
  }
});

// 组件使用
<Button variant="text" disabled sx={{ border: '1px solid black' }}>
  <StyledTypography>Some text</StyledTypography>
</Button>

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