Acabo de empezar a usar un componente con estilo y tuve algunos problemas para establecer los valores de accesorios para un componente personalizado. Tengo un componente de tarjeta que se ve así

 <Card className="card" size="none" disableCardClick />

Ahora he convertido este componente en un componente con estilo como este

 const StyledCard = styled(Card).attrs(props => { size="none" disableCardClick data-test-id="wc-ftu-redesign-card" })` height: 100%; max-width: 927px; @media (min-width: 810px) { max-width: 529px; } @media (max-width: 810px) { max-height: 600px; } @media (max-width: 650px) { max-height: 750px; } @media (max-width: 550px) { overflow-y: scroll; } `;

Como queda claro en el código, tengo problemas para pasar los valores de apoyo (tamaño y deshabilitarCardClick) al componente de tarjeta personalizado. De hecho, ni siquiera estoy seguro de si attrs es la forma correcta de establecer el valor de los accesorios. Quiero establecer ese valor de size y disableCardClick en el componente con estilo StyledCard . ¿Cómo puedo lograr eso? También "data-test-id" me está dando un error que ; expected