Styled Components：如何避免属性传递给被扩展的组件？

我来给你两种靠谱的实现方式，都是styled-components生态下的标准做法，能完美解决你的需求：

方法1：使用Transient Props（推荐，styled-components v5.1+支持） #

这是官方推荐的方案，通过给属性加$前缀标记为「仅样式用的属性」，styled-components会自动过滤掉这些属性，不会传递给底层的第三方组件（比如你用的react-textarea-autosize）。

import Textarea from 'react-textarea-autosize';
const TextareaAutosizeSC = styled(Textarea)` 
  /* 你的基础样式 */
`;
// 用$completed替代completed，标记为transient prop
const StyledItemTextarea = TextareaAutosizeSC.extend` 
  color: ${({ $completed }) => $completed ? '#ccc' : '#fff'}; 
`;
const MyTextarea = ({ completed, ...restProps }) => {
  // 把completed转成$completed传给样式组件，其余props正常传给底层Textarea
  return <StyledItemTextarea $completed={completed} {...restProps} />;
};

方法2：用shouldForwardProp过滤属性（适配旧版本styled-components） #

如果你的项目用的是v5.1之前的styled-components版本，可以通过withConfig配置来指定哪些属性不传递给底层组件：

import Textarea from 'react-textarea-autosize';
const TextareaAutosizeSC = styled(Textarea)` 
  /* 你的基础样式 */
`;
// 配置shouldForwardProp，过滤掉completed属性
const StyledItemTextarea = TextareaAutosizeSC.extend.withConfig({
  shouldForwardProp: (propName) => propName !== 'completed'
})` 
  color: ${({ completed }) => completed ? '#ccc' : '#fff'}; 
`;
const MyTextarea = ({ completed, ...restProps }) => {
  return <StyledItemTextarea completed={completed} {...restProps} />;
};

为什么原来的写法有问题？ #

默认情况下，styled-components会把所有接收到的属性都传递给底层的DOM元素或第三方组件。而react-textarea-autosize并没有定义completed这个属性，直接传递会触发React的「未知属性警告」，同时这个属性对底层组件来说完全无用。上面两种方法都能避免这个问题，让completed只作用于样式计算。

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