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

My project is trying to switch to styled-components, but there is one big issue: our automated QA tests rely on a custom attribute called qa-component appearing in the dom for each HTML element that it is defined for.

The old way we did this worked fine: <div style={ styles.cssModuleStyle } qa-component="big-area" /> would translate to the dom as <div qa-component="big-area" />.

However, when using styled components, the qa-component attribute gets stripped because SC thinks its a prop.

How can I get styled-components to pass this custom attribute to the dom?

CodePudding user response：

What you're looking for is withConfig shouldForwardProp. It allows you to define what props get passed down. Here's how you can implement the desired behavior:

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

Take a look at the docs here: https://styled-components.com/docs/api#shouldforwardprop

And here's a playground with this approach: https://stackblitz.com/edit/stackoverflow-71912300