扩展样式后，如何覆盖样式组件上设置的设置?

Question

无论如何，我可以删除从另一个扩展而来的styled-component继承的属性吗？

我将陈述一段非常愚蠢的代码来说明我的意思：

const FormInput = styled.input.attrs({
type: "text",
})`
border-color: blue;  
color: red;
${({$size}) => `
height: ${$size}rem;
width: ${$size}rem;
`}
`;
const Label = styled(FormInput)``

type: "text"由Label继承。在这种情况下，我不能渲染它吗？假设在这种情况下我会渲染<Label as="Label" />

Answer 1

从版本 5.1 开始，您可以将shouldforwardprop谓词传递给.withConfig()，并过滤掉您不想呈现的属性：

const Label = styled(FormInput).withConfig({
shouldForwardProp: (prop, defaultValidatorFn) =>
!['type'].includes(prop)
&& defaultValidatorFn(prop),
})``;

要过滤掉几个属性，请将数组提取到const：

const forbiddenProps = ['type', 'placeholder'];
const Label = styled(FormInput).withConfig({
shouldForwardProp: (prop, defaultValidatorFn) =>
!forbiddenProps.includes(prop)
&& defaultValidatorFn(prop),
})``;