Styled-Components样式在Ant Design中被覆盖问题求助

问题原因 #

Ant Design的TextArea组件会将样式应用到内部嵌套的原生<textarea>元素上，直接用styled(TextArea)添加的resize: none只会作用于Antd组件的外层容器，无法穿透到真实的输入框元素；同时Antd自带的CSS规则优先级可能高于自定义样式，导致设置不生效。

解决方法 #

方法1：穿透到内部textarea元素 #

利用styled-components的嵌套选择器，直接定位到内部的原生textarea标签：

const StyledTextArea = styled(TextArea)`
  & textarea {
    resize: none;
  }
`;

或者通过Antd的类名精准定位（Antd的TextArea内部输入框会带有.ant-input类）：

const StyledTextArea = styled(TextArea)`
  & .ant-input {
    resize: none;
  }
`;

方法2：使用内联样式（优先级最高） #

直接给Antd TextArea传入style属性，内联样式优先级高于外部CSS，能确保生效：

<StyledTextArea rows={3} style={{ resize: 'none' }} />

方法3：强制提高样式优先级（不推荐，仅应急） #

如果上述方法都无效，可以用!important强制覆盖原有样式（注意：过度使用会导致样式维护困难）：

const StyledTextArea = styled(TextArea)`
  & textarea {
    resize: none !important;
  }
`;

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