En este enfoque, añadimos un elemento de estilo al DOM general, en lugar de adjuntar propiedades al nodo DOM (como se hace con el primer enfoque, es decir, los estilos en línea).
A continuación se muestra un ejemplo de lo mismo:
12345678importación de estilo de$0027styled-components$0027;constMyTitle= styled.div`color: azul,fondo: amarillo`<MyTitle>MyFirstCSS-in-JSReact component!<;MyTitle javascriptEl navegador lo mostraría de la siguiente manera:
1234567<style; Estos son en realidad componentes de estilo y parecen ser una de las mejores prácticas, ya que sólo afectan al componente específico donde se renderizan y no afectan a ningún otro lugar de la aplicación.El uso de componentes de estilo puede ser una forma muy agradable de organizar nuestros componentes de React. No tenemos que ensuciar nuestro código JSX con muchos elementos div/span. Podemos simplemente renderizar los componentes con sus propios estilos. Además, como este enfoque no tendría estilos en línea, nuestro código se vuelve fácil de leer. Y, lo más importante, podemos hacer cambios en nuestro CSS en cualquier momento, sin preocuparnos de si tendría un impacto en cualquier otro componente.