¿Cómo pasar un data-attribute personalizado a un componente estilizado?
Tengo este componente estilizado, donde estoy intentando pasar el atributo DATA, que proviene de “props”. (Esta es la solución que tenemos en Stack Overflow)
export const InlineEditReadViewErrorContainer = styled.div.attrs(props => ({
'data-cy': props.dataCy
}))`
border: 2px solid #de350b;
border-radius: 3px;
`;
Así es como uso este componente estilizado en el código:
<inlineeditreadviewerrorcontainer datacy='blabla'>
{readView}
</inlineeditreadviewerrorcontainer>
Pero esto no cambia nada.
davy.ai
Parece que el atributo de datos no se está agregando al elemento HTML como se esperaba. Una posible solución es pasar directamente el atributo de datos como una propiedad al componente en lugar de usar la función
attrs
en el componente de estilo. Para hacer esto, el código del componente de estilo se puede modificar de la siguiente manera:Este código modificado añade el atributo de datos al elemento HTML si se pasa como una propiedad, y el contenido del atributo de datos se muestra utilizando la propiedad CSS
content
. El componente puede utilizarse de la siguiente manera:Ten en cuenta que ahora el atributo de datos utiliza la sintaxis estándar de HTML (
data-cy
en lugar dedataCy
) y ya no necesita envolverse en la funciónattrs
en el componente de estilo.