Estaba mirando componentes con estilo y vi esta sintaxis:
const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; No puedo entender qué sucede debajo del capó y qué propiedad se aplica realmente al objeto con styled . ¿Hay alguien que pueda explicarme cómo se ejecuta este código?
Lea acerca de las plantillas etiquetadas
Esta es básicamente una función, pero puede ejecutarla sin ()
const styled = data => { return data + ' JavaScript'; }; const data = styled `I love`; console.log(data);Ejemplos con funciones integradas:
console.log('ab c'.split ` `) console.log(Object.entries `abc`) console.log([1, 2, 3].concat `abc`)Crea un elemento h1 con estilo, por ejemplo, en el componente de encabezado:
const Title = styled.h1` font-size: 2rem; text-align: center; color: blue; `; Lo usas como una etiqueta <h1> pero con un nombre personalizado:
<Title>My portfolio</Title> Finalmente obtienes el nombre de clase de hash estático sc-<hashedStringName> y uno es una clase dinámica:
<h1 class="sc-gsnERi fiwDZi">My portfolio</h1>Componentes con estilo:
Básicamente, esto le permite crear una etiqueta personalizada en JSX. También puede pasar accesorios a las propiedades de estilo en componentes con estilo.
Si tienes este jsx:
<Title>This is Custom H1</Title> const Title = styled.h1` color: red; `Representará HTML como este:
<h1 class="someRandomAlphabet">This is Custom H1</h1>donde la clase de etiqueta h1 tendrá estas propiedades:
.someRandomAlphabet{ color: red; }