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

Question

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

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

但是，当使用样式组件时，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/Whosebug-71912300

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

How to prevent styled-components from stripping custom HTML attributes?

javascript

jsx

reactjs

styled-components