Tengo una pregunta sobre los componentes con estilo y lo que sucede cuando se hace referencia a un componente con estilo en otro componente con estilo.
Conozco los documentos oficiales con el ejemplo de Link , pero no entiendo qué sucede exactamente cuando se hace referencia a un componente con estilo.
Entonces, mi pregunta: en el siguiente ejemplo, ¿las referencias ${A}, ${B} pasan su estilo al contenedor? o solo haciendo referencia a él, así que cambie los atributos específicos.
¿Cómo se maneja esto bajo el capó?
p.ej:
const A = styled.div` background-color: red; margin-top: 10px; ` const B = styled.div` background-color: blue; ` const Wrapper = styled.div` ${A}, ${B} { background-color: green; } ` export const NiceComponent: React.FC = () => { return ( <Wrapper> <A /> <B /> </Wrapper > );Hacer referencia a otros componentes con estilo (en su ejemplo A y B ) como interpolación dentro de la plantilla de cadena pseudo-SCSS de un componente con estilo (aquí Wrapper ) es el equivalente a usar su nombre de clase (asignado automáticamente) dentro de su selector.
De esta manera, puede referirse a un antepasado (como se hace en los documentos) o dirigirse a los niños (como en su ejemplo).
Como tal, esta técnica no "aprueba el estilo"; para hacerlo, aplicaría estilo a otro componente con estilo, como una herencia (por ejemplo, podría hacer const Child = styled(A) )
En su ejemplo, los componentes con estilo asignarán un nombre de clase a cada componente; digamos "scAAA" al componente A y "scBBB" al B. Luego este código:
const Wrapper = styled.div` ${A}, ${B} { background-color: green; } `...se traduce como:
const Wrapper = styled.div` .scAAA, .scBBB { background-color: green; } ` Entonces, lo que hace es definir un nuevo color de fondo para todos los componentes A y B que son hijos de Wrapper .
Pero si los usa fuera de un Wrapper , solo tendrán sus estilos iniciales.