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

Question

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 class="whatever" 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?

Answer 1

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