如何防止样式组件剥离自定义HTML属性?

Question

我的项目正在尝试切换到有样式的组件，但有一个大问题:我们的自动化QA测试依赖于一个名为qa-component的自定义属性，该属性出现在每个HTML元素的dom中，

我们的旧方法很好:<div style={ styles.cssModuleStyle } qa-component="big-area" />将转换为<div class="whatever" qa-component="big-area" />的dom。

然而，当使用样式组件时，qa-component属性被剥离，因为SC认为它是一个道具。

如何让样式组件将这个自定义属性传递给dom?

Answer 1

你要找的是withConfig+shouldForwardProp。它允许你定义要传递的道具。下面是实现所需行为的方法:

const StyledTitle = styled.h1.withConfig({
shouldForwardProp: (prop, defaultValidatorFn) =>
defaultValidatorFn(prop) || ['qa-attribute'].includes(prop),
})`
text-decoration: underline;
`;

查看这里的文档:https://styled-components.com/docs/api#shouldforwardprop

这里是一个游乐场，使用这种方法:https://stackblitz.com/edit/stackoverflow-71912300