Creo que debemos usar correctamente los atributos que se agregan a un componente en React y más si se necesitan solo para darle estilo a un componente.

Deberíamos usar tantas propiedades nativas como sea posible pero sin comprometer los datos privados que estarían expuestos en el HTML que el cliente muestra en broser, por lo tanto:

• Si va a utilizar atributos de datos :

Recuerde cómo nombrar estos atributos: el nombre del atributo no debe contener letras mayúsculas y debe tener al menos un carácter después del prefijo "datos-".

Nota: solo usaría el más simple posible, con booleanos para dar un conjunto de propiedades como se describe en la primera respuesta, por ejemplo:

componente.js

 <Error data-active={true}> {readView} </Error>

componente.styles.js

 export const Error = styled.div` &[data-active="true"] { border: 2px solid #de350b; border-radius: 3px; } `;

• Si desea usar accesorios personalizados sin que se muestren en el DOM como se describe en el segundo comentario, use accesorios transitorios :

Para muestra:

componente.js

 <Error $active={true}> {readView} </Error>

componente.styles.js

 export const Error = styled.div` ${({$active}) => $active ? css` border: 2px solid #de350b; border-radius: 3px; `: null} `;

El accesorio ya debería estar "aprobado" en el sentido de que aparecerá en el componente con el fin de usarlo en Cypress. Si desea usarlo internamente, también puede usar accesorios transitorios como este

 const Comp = styled.div` color: ${props => props.$draggable || 'black'}; `; render( <Comp $draggable="red" draggable="true"> Drag me! </Comp> );

Fue mucho más fácil. Puede pasar el atributo de datos directamente donde usa el componente con estilo y todo estará bien.

 <InlineEditReadViewErrorContainer data-cy='dateInput'> {textValue} </InlineEditReadViewErrorContainer>