Estoy tratando de diseñar un componente como este:
function _MenuItem({label, icon}){ return <div> {icon} <p>{label}</p> </div> } export const MenuItem = styled(props => <_MenuItem {...props} />)` color: red; p{color: red} *{color: red} `El componente se está renderizando, pero los estilos no se están aplicando.
Me las arreglé para aplicar los estilos haciendo un div con estilo y creando el componente a partir de ese div , pero me preguntaba si hay una manera de aplicar los estilos directamente al componente.
Soy muy nuevo con reaccionar y más con componentes con estilo, así que asumo que he entendido mal algunos conceptos básicos.
Hacer un div con estilo es la forma correcta de hacer las cosas. No pude encontrar nada sobre diseñar un componente directamente ni sentí la necesidad de hacerlo antes.
Incluso cuando los documentos de componentescon estilo describen cómo diseñar cualquier componente , básicamente están diseñando un elemento con una sintaxis diferente.
No parece haber una razón suficientemente buena para hacer lo que quiere hacer, ya que puede lograr lo que quiere lograr usando los componentes con estilo según lo previsto.
La siguiente forma de hacer las cosas funciona y es súper simple:
import styled from "styled-components" const _MenuItem = ({label, icon}) => { return <Root> {icon} <p>{label}</p> </Root> } const Root = styled.div` color: red; p{color: red} *{color: red} ` export default _MenuItem;Avíseme si me falta algún caso de uso específico u otro.