如何修改Ant Design禁用状态下按钮组件的文字颜色？

你的代码没生效的核心原因是：嵌套的.and-btn-primary[disabled]选择器没有正确命中目标元素。用styled(Button)包装组件时，需要直接针对当前生成的组件元素编写样式，而非嵌套类选择器。

以下是几种可行的解决方案：

• 直接针对组件的disabled状态编写样式：用&指代StyledButton本身，结合:disabled伪类（或[disabled]属性选择器）：

const StyledButton = styled(Button)`
  &:disabled {
    background-color: red;
    color: white; // 建议改为白色，避免文字与背景同色无法辨认
  }
`;

• 确保自定义Button组件透传disabled属性：如果你的Button是自定义组件，必须把disabled props传递给根级按钮元素，否则styled-components无法识别禁用状态：

// 自定义Button组件示例
const Button = ({ disabled, className, ...props }) => {
  return (
    <button 
      className={`and-btn-primary ${className}`} 
      disabled={disabled} 
      {...props}
    />
  );
};

• 临时提升样式优先级（应急方案）：如果原Button组件的样式优先级更高，可临时用!important强制覆盖（不推荐长期使用）：

const StyledButton = styled(Button)`
  &:disabled {
    background-color: red !important;
    color: white !important;
  }
`;

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