Mi proyecto está tratando de cambiar a componentes con estilo, pero hay un gran problema: nuestras pruebas de control de calidad automatizadas se basan en un atributo personalizado llamado qa-component aparece en el dom para cada elemento HTML para el que está definido.
La forma antigua en que hicimos esto funcionó bien: <div style={ styles.cssModuleStyle } qa-component="big-area" /> se traduciría al dom como <div class="whatever" qa-component="big-area" /> .
Sin embargo, cuando se usan componentes con estilo, el atributo qa-component se elimina porque SC cree que es un accesorio.
¿Cómo puedo obtener componentes con estilo para pasar este atributo personalizado al dom?
Lo que estás buscando es withConfig + shouldForwardProp . Le permite definir qué accesorios se transmiten. Así es como puede implementar el comportamiento deseado:
const StyledTitle = styled.h1.withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => defaultValidatorFn(prop) || ['qa-attribute'].includes(prop), })` text-decoration: underline; `;Eche un vistazo a los documentos aquí: https://styled-components.com/docs/api#shouldforwardprop
Y aquí hay un patio de recreo con este enfoque: https://stackblitz.com/edit/stackoverflow-71912300