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?
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