如何修改AntD禁用Autocomplete组件的悬浮光标及红色错误样式？

用styled-components修改AntD Autocomplete禁用状态的光标样式时，直接写类名可能因为局部作用域或优先级问题不生效，按以下方式修改即可：

正确的styled-components写法 #

import { Autocomplete } from 'antd';
import styled from 'styled-components';

const StyledAutocomplete = styled(Autocomplete)`
  // 覆盖禁用状态下容器的光标
  &.ant-select-disabled {
    cursor: default !important;
    
    // 覆盖输入框内的光标
    .ant-select-selector input {
      cursor: default !important;
    }
  }
`;

// 使用时替换原组件
<StyledAutocomplete disabled options={你的选项列表} />

为什么之前的代码不生效 #

1. 直接写.ant-select-disabled会脱离styled-components的局部作用域，无法精准匹配到当前组件实例，必须用&关联组件自身的类名。
2. AntD默认样式优先级较高，需要通过!important或更精确的嵌套选择器提升权重，确保自定义样式生效。

内容的提问来源于stack exchange，提问作者ask-N-answered