es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo pasar un data-attribute personalizado a un componente estilizado?

05 Aug, 2023 Programación

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    export const InlineEditReadViewErrorContainer = styled.div`
  border: 2px solid #de350b;
  border-radius: 3px;
  &[data-cy] {
    content: attr(data-cy);
  }
`;

    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:

    <inlineeditreadviewerrorcontainer data-cy='blabla'>
  {readView}
</inlineeditreadviewerrorcontainer>

    Ten en cuenta que ahora el atributo de datos utiliza la sintaxis estándar de HTML (data-cy en lugar de dataCy) y ya no necesita envolverse en la función attrs en el componente de estilo.

Comments are closed.