如何防止樣式組件剝離自定義 HTML 屬性？

Question

我的項目正在嘗試切換到樣式化組件，但存在一個大問題：我們的自動化 QA 測試依賴於一個名為qa-component的自定義屬性，該屬性出現在 dom 中，用於為其定義的每個 HTML 元素。

我們這樣做的舊方法很好用： <div style={ styles.cssModuleStyle } qa-component="big-area" />將轉換為 dom 為<div class="whatever" qa-component="big-area" /> 。

但是，當使用樣式化組件時， qa-component屬性會被刪除，因為 SC 認為它是一個 prop。

如何讓樣式化組件將此自定義屬性傳遞給 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