Qwik — Estilos

Claves detalladas para trabajar con buenas prácticas aplicando los estilos en Qwik

19 min readFeb 20, 2023

Comenzamos un nuevo artículo en el que vamos a trabajar de manera más profunda con los estilos en Qwik para complementarlo junto con todo lo que hemos aprendido hasta ahora.

Os recomiendo leer los artículos anteriores en orden y si practicáis, ¡¡mucho mejor!!.

Recordad, que si hay dudas, aun leyéndolo, podéis preguntarlo en los comentarios.

Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:

Anartz Mugika Ledo🤗

Qwik paso a paso desde 0 al detalle

View list

23 stories

Los requisitos a tener en cuenta son los mismos que en todos los artículos y para trabajar en este artículo, os recomiendo que partáis desde este código que es el que usaré en el ejemplo.

El artículo lo vamos a dividir en estos apartados

Introducción a los estilos
Estilos globales
Estilos por componente: Uso de useStyles$ y useStylesScoped$
CSS en Javascript (css-in-js)
styled components (Componentes con estilo)

Introducción a los estilos

Probablemente hayas oído hablar (y conoces por experiencias previas) acerca de los estilos CSS. ¿Para qué sirven exactamente?

En resumen, se podría decir que servirán para tunear el aspecto de una web y que se transforme en algo que nos entre más por los ojos cuando estamos navegando con cualquier dispositivo en una página web.

Vale, entendido, ¿entonces que tiene de especial en Qwik trabajar con estilos respecto a otras tecnologías? No es muy diferente a la hora de trabajar, pero vamos a que tener en cuenta algunos aspectos para hacerlo correctamente sin liarnos mucho la cabeza y sin aplicar cambios que salgan “caros” en los tiempos de ejecución.

Os daré las claves necesarias para aplicar estilos de una manera u otra y luego ya estará en vuestras manos hacer magia con la apariencia de vuestros proyectos.

Por eso, profundizaremos sobre las diferentes formas de aplicar CSS en Qwik.

¡Vamos a por ello!

Estilos globales

Muchas aplicaciones usan una hoja de estilos global para restablecer el navegador y/o definir estilos globales.

Esta es una buena práctica, pero no se recomienda usarla para diseñar nuestros componentes.

Qwik está optimizado para permitir que el navegador simplemente descargue los estilos que se necesitan para la vista actual mediante la carga perezosa.

Si usamos una hoja de estilo global, todos los estilos se descargarán en la primera carga, incluso si no son necesarios para la vista actual y eso hará que no estemos aplicando correctamente el potencial que nos proporciona Qwik con la carga diferida.

Usaremos estilos globales para trabajar con elementos comunes del core de nuestro proyecto, ya que serán apartados que si se van a usar desde la primera carga como pueden ser títulos, estructuras de listas, columnas,… serán necesarios y será correcto cargarlos desde la primera carga.

Para definir un fichero global de estilos, usaremos el que nos proporciona Qwik en la ruta src/global.css.

Para cargar su contenido, lo importaremos usando lo siguiente:

import globalStyles from './global.css?inline';

Automáticamente, Qwik intentará alinear este archivo en modo de producción si la cantidad de CSS es inferior a 10 KB. Si el archivo tiene más de 10 KB, se cargará como un archivo separado.

Y para poder usarlo en Qwik de manera global, debemos de usar la función useStyles$() para decirle a Qwik qué queremos usar estos estilos globales.

Pasamos al siguiente punto donde haremos la carga de los estilos globales con useStyles$().

useStyles$()

Imaginaros que nos encontrásemos en la situación que cargasemos los estilos en línea, como este ejemplo:

export const MyComponent = () => {
  return (
    <div style="color: red">
      My Component
    </div>
  );
}

Tenemos el problema que con este enfoque vamos a cargar los estilos dos veces (ó más, dependiendo si estamos aplicando un mismo estilo en diferentes componentes, donde aplicaríamos cargas innecesarias) ocurriendo lo siguiente.

Los estilos se insertan en el HTML como parte del SSR.
Luego, cuando el componente se invalida y necesita volver a renderizar el contenido, los estilos se cargan nuevamente porque están en línea.

Para solucionar este problema trabajando correctamente y sin cargas extras, necesitaremos cargar los estilos independientemente del componente más a nivel global usando la función useStyles$() que es un método de carga de estilos con carga diferida (Lazy Load) tan solo si es necesario evitando cargarlo dos veces en caso de hidratación SSR.

Comportamiento de carga de estilos en la primera carga

En el ejemplo con el que estamos trabajando, que es basado en el proyecto que se crea con el comando del CLI que nos proporciona el equipo de Qwik, tenemos en src/root.tsx lo siguiente y así es como se cargarían los estilos con Lazy Load en Qwik mediante useStyles$():

import { component$, useStyles$ } from '@builder.io/qwik';
...

import globalStyles from './global.css?inline';
export default component$(() => {
  useStyles$(globalStyles);
  return (
    ...
  );
});

Antes de nada, ¿Cuál es el motivo de usar ?inline al final de la referencia del fichero CSS?

Esto es algo que tenemos que implementar cuando trabajamos con Vite para importarlo como una cadena de texto, si no, no funcionará. Recordad que hay agregar el parámetro de consulta en línea a la importación, así: importar estilos desde ./<nuestra-hoja-de-estilos>.css?inline;

¿Dónde se incrustan estos estilos usando useStyles$? Siempre que carguemos los estilos de esta manera se añadirán en el head de la página principal donde estará presente en todo momento para su uso a nivel global, independientemente de la ruta en la que nos encontremos (Para acceder aquí seleccionamos Inspeccionar elemento para acceder a las Herramientas del desarrollador en nuestro navegador):

Si vamos al fichero src/global.css, podemos observar que en efecto, está cargando bien su contenido:

Podemos experimentar haciendo un cambio en vivo desde el navegador, por ejemplo cambiamos el estilo del background-color en el body a un azul por ejemplo, podemos usar la variable --qwik-dark-blue. pasamos de esto:

body {
  background-color: #fafafa;
  ...
}

A lo siguiente:

body {
  background-color: var(--qwik-dark-blue);
  ...
}

Y aplicando los cambios, cambiará el fondo pero solo de manera temporal hasta que refresquemos desde el navegador o cambiemos de ruta haciendo que coja su configuración inicial, para mostrar un fondo blanco y seguir aplicando lo que tenemos establecido en el fichero de manera global.

Por ejemplo, si voy a la ruta adicional que tenemos /second, se restablece la configuración cargando la información original de src/global.css\

Bien, ahora que lo tenemos más claro, vamos a aplicar que todos los h1 estén en rojo con borde azul punteado, vamos al fichero src/global.css y añadimos lo siguiente:

h1 {
  color: red;
  border: 2px dotted var(--qwik-dark-blue)
}

Guardamos y vamos a /

Vamos a /second

Como podéis observar, tanto en uno como en otro ya podemos usar los estilos aplicados.

Comportamiento en los estilos que se cargan de manera diferida junto con un nuevo componente

Ahora que ya sabemos como trabajar con ello con la carga inicial, os explicaré el punto donde podremos cargar un componente hijo llamado <PlusInfo /> en (src/routes/index.tsx) que se podrá agregar haciendo clic en el botón de acción en la página principal, donde añadiremos unos estilos mediante useStyles$().

Primeros los estilos en una cadena de texto:

export const PlusInfoCss = `
.plus-info {
  margin-top: 1em;
  border: 1px solid red;
  padding: 1em;
  display: block;
}
`;

Y luego añadimos el componente que se cargará con un click:

import { component$, useStyles$ } from '@builder.io/qwik';
export const PlusInfo = component$(() => {
  useStyles$(PlusInfoCss);
  return (
    <div class="plus-info">
      <div>More info...</div>
    </div>
  );
});

Ahora lo que nos queda es añadir un estado con useStore (que explicaré su funcionamiento más al detalle en los próximos artículos) y un botón, junto con el componente que se mostrará cuando el valor open sea true aparte de un enlace para navegar a la página /second y así no recargar la página desde el navegador y ver como se comporta.

import { component$, useStore, useStyles$ } from '@builder.io/qwik';
import { DocumentHead, Link } from '@builder.io/qwik-city';

/*
Estilos de PlusInfo y el componente PlusInfo
*/

export default component$(() => {
  const store = useStore({open: false})
  return (
    <div>
      ...
      {store.open ? <PlusInfo /> : null}
      <button onClick$={() => (store.open = !store.open)}>Show Plus Info</button><br/>
      <Link href="/second">Second Page</Link>
    </div>
  );
});

Quedará así:

import { component$, useStore, useStyles$ } from '@builder.io/qwik';
import { DocumentHead, Link } from '@builder.io/qwik-city';
export const PlusInfoCss = `
.plus-info {
  margin-top: 1em;
  border: 1px solid red;
  padding: 1em;
  display: block;
}
`
export const PlusInfo = component$(() => {
  useStyles$(PlusInfoCss);
  return (
    <div class="plus-info">
      <div>More info...</div>
    </div>
  );
});

export default component$(() => {
  const store = useStore({open: false})
  return (
    <div>
      <h1>Leaflet - Styles</h1>
      <p>Trabajaremos con los estilos</p>
      <p>Todos los artículos con los que hemos trabajado: <a href="https://medium.com/@mugan86/list/qwik-paso-a-paso-desde-0-al-detalle-e7df8b471166" target="_blank">Medium</a></p>
      <ol>
        <li>Introducción a los estilos</li>
        <li>Estilos globales</li>
        <li>Estilos por componente: Uso de useStyles$ y useStylesScoped$</li>
        <li>CSS en Javascript</li>
        <li>Styled Components (Componentes con estilo)</li>
      </ol>
      {store.open ? <PlusInfo /> : null}
      <button onClick$={() => (store.open = !store.open)}>Show Plus Info</button><br/>
      <Link href="/second">Second Page</Link>
    </div>
  );
});

La apariencia actual que tenemos es la siguiente:

Es lo que teníamos antes.
Botón para añadir el componente <PlusInfo />, ya que por defecto no se carga y con ello no cargará la clase .plus-info
Enlace para ir a la página de la ruta /second

Si vamos a las herramientas de desarrollador, al apartado de Elementos podemos observar los estilos que tenemos cargados.

Por el momento solo están añadidos los estilos correspondientes a src/global.css( cuya referencia es q:style="avnanb-0" pero no los estilos de la clase plus-info que aparecerá de este al cargarse cuando mostremos por primera vez el componente <PlusInfo /> pulsando (2) (NO PULSAR TODAVÍA).

Antes de pinchar en Show Plus Info, vamos a añadir unos cambios en src/routes/second/index.ts sustituyendo lo siguiente:

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <div>
      <h1>Second page</h1>
      <p>Content second page</p>
    </div>
  );
});

Por lo siguiente, donde encontramos que se añade el componente <PlusInfoSecond />, que a diferencia de la ruta principal NO CARGAMOS ningún estilo, para que se pueda observar como se comporta la carga de los estilos en la otra ruta si cargásemos o no cargásemos el componente <PlusInfo /> en la ruta inicial, que en el caso de hacerlo, se añadirían los estilos de con la clase .plus-info para usarlos en esta ruta (/second) y si no, no tendríamos opción (esto no es el comportamiento habitual, se está implementando así a modo de demostración su funcionamiento):

import { component$ } from '@builder.io/qwik';
import { Link } from '@builder.io/qwik-city';
export const PlusInfoSecond = component$(() => {
    return (
      <div class="plus-info">
        <div>More info...</div>
      </div>
    );
  });
export default component$(() => {
  return (
    <div>
      <h1>Second page</h1>
      <p>Content second page</p>
      <PlusInfoSecond />
      <Link href='/'>Home</Link>
    </div>
  );
});

Volvemos a la ruta inicial (/) y sin tocar nada más, vamos a navegar a la segunda página:

Estando en la segunda página, tenemos cargado el componente <PlusInfoSecond /> que contiene la clase .plus-info (como en el componente <PlusInfo />, pero que no muestra el borde rojo por no tener esos estilos cargados previamente en la ruta inicial.

Esto es lo lógico, ya que en la ruta inicial NO hemos pulsado Show Plus Info. Volvemos a la página principal mediante el enlace Home.

Y ahora si pulsamos en Show Plus Info (1).

Debido a que no formaba parte del SSR renderizado previamente el componente <PlusInfo /> se muestra por primera vez el componente que carga los estilos con la clase .plus-info (3) y se aplica el borde rojo (2) como se puede apreciar en la siguiente imagen.

¿Qué pasará ahora si navegamos a la página /second desde el enlace Second Page?

(Pensad un par de segundos y mirar la imagen anterior)

Al ir la nueva página, como ya tenemos los estilos de la clase .plus-info cargados pr la ejecución de la acción para cargar <PlusInfo/> en la ruta inicial.

Esto hará que teniendo esa clase ya cargada ahora si se visualice con un borde rojo (1) el contenido de <PlusInfoSecond />

Teniendo claro esto, pasamos al useStylesScoped$() que es similar a este pero con alguna diferencia que se explica a continuación.

Para poder tener disponibles lo cambios realizados en este apartado, os dejo el código a continuación:
https://github.com/mugan86/qwik-basic-example-template/tree/feature/styles-01-useStyles

useStylesScoped$()

En el apartado anterior, hemos visto cómo los estilos se pueden cargar de forma diferida a medida que se necesitan usando la función useStyles$() con el caso inicial de los estilos globales y con la clase .plus-info que cargaba de manera diferida SI renderizábamos el componente <PlusInfo /> en la ruta inicial.

Os dejo el código desde donde empezaré a trabajar, para que no tardemos más tiempo del necesario en realizar los cambios y empezar desde la base que necesitamos:
https://github.com/mugan86/qwik-basic-example-template/tree/feature/styles-02-useStylesScoped-start

Los estilos del navegador son globales y se aplicarán a todos los elementos DOM y por otro lado, ajeno a esto, Qwik también proporciona una forma de cargar estilos que será de manera especifica para un componente específico de manera aislada.

Esto se logra generando una clase única para cada componente y luego insertando esa identificación de clase única en la hoja de estilo.

En resumen, usaremos useStylesScoped$() para cargar y aplicar un estilo concreto que encontramos en varios apartados con una personalización en un componente específico únicamente.

Ejemplo

En este ejemplo, vamos a trabajar con dos componentes que tienen una clase con el mismo nombre pero diferentes color de fondo.

Si seguimos usando useStyles$() al cargar los estilos tanto de uno como del otro con esta función, los dos estilos chocan, lo que da como resultado un comportamiento indeseable aplicando el estilo del componente que está en segunda posición (en el orden de ejecución de arriba hacia abajo), ya que cogerá en el estado global el valor más actual.

Veamos y analicemos el problema.

Accedemos a src/routes/index.tsx y creamos estos dos componentes usando useStyles$() y aplicando un color de fondo diferente a los dos:

export const OrangeComponent = component$(() => {
  useStyles$(`
    .bg {
      background-color: orange;
    }`);
  return (
    <div class="bg">
      <div>OrangeComponent</div>
    </div>
  );
});

export const GreenComponent = component$(() => {
  useStyles$(`
    .bg {
      background-color: green;
    }`);
  return (
    <div class="bg">
      <div>Green Componente</div>
    </div>
  );
});

Añadimos los componentes dentro del contenido HTML:

export default component$(() => {
  return (
    <div>
      <h1>Leaflet - Styles</h1>
      <p>Trabajaremos con los estilos</p>
      <GreenComponent/>
      <OrangeComponent/>
     ....
    </div>
  );
});

Y este será el resultado:

¿Cómo es posible que aparezca el fondo solo en naranja para los dos casos? Estos es debido a que estamos encapsulando en los estilos globales y como el componente <OrangeComponent /> que es en el orden establecido, es último, como cuyo color de fondo es naranja, hace que se actualice con ese color aplicando ese cambio a todos los componentes con la clase .bg aplicando CSS.

Podemos ver que es así, si cambiamos el orden, ahora poniendo primero <OrangeComponent /> y posteriormente <GreenComponent />. Lo que debe de pasar es que se deben de aplicar los estilos de <GreenComponent /> cuya clase .bg tendrá un fondo de color verde:

export default component$(() => {
  return (
    <div>
      <h1>Leaflet - Styles</h1>
      <p>Trabajaremos con los estilos</p>
      <OrangeComponent/>
      <GreenComponent/>
     ....
    </div>
  );
});

Como podéis observar, pasa lo mismo, pero como hemos invertido el orden ahora cogerá los estilos del componente <GreenComponent />

Viendo el problema vamos a darle solución y lo único que debemos de hacer en estos casos, para los componentes en los que queremos aislar los estilos aplicando los específicos es usar la función useStylesScoped$().

Es tan sencillo como cambiar useStyles$() por useStylesScoped$() quedando así:

import { component$, useStylesScoped$ } from '@builder.io/qwik';

export const OrangeComponent = component$(() => {
  useStylesScoped$(`
    .bg {
      background-color: orange;
    }`);
  return (
    <div class="bg">
      <div>OrangeComponent</div>
    </div>
  );
});
export const GreenComponent = component$(() => {
  useStylesScoped$(`
    .bg {
      background-color: green;
    }`);
  return (
    <div class="bg">
      <div>Green Componente</div>
    </div>
  );
});

Ahora recargando la página, deberían de aparecer los componentes aplicando sus estilos propios:

Si observamos a los elementos de la página, a diferencia de lo que se reflejaba antes es que en la parte donde se asigna la clase .bg se está asignando una nueva clase con el valor del q-style de cada componente específico.

Por ejemplo, observando el componente <OrangeComponent />

Así conseguiremos personalizar específicamente los estilos de un componente aun teniendo el mismo nombre de clase.

Llegados a este punto ya hemos trabajado con las dos funciones principales para aplicar estilos a nivel global (useStyles$) y a nivel especifico de componente (useStylesScoped$) desde estilos definidos en una cadena de texto.

Lo que vamos a hacer en los siguiente puntos es definir esos estilos aplicando el CSS en Javascript y mediante el uso de Styled Components (componentes estilizados).

Antes de comenzar con el siguiente punto, os dejo el resultado de lo trabajado en este apartado:
https://github.com/mugan86/qwik-basic-example-template/tree/feature/styles-02-useStylesScoped

CSS en Javascript

Qwik tiene compatibilidad con CSS dentro de Javascript como primera clase utilizando styled-vanilla-extract, que nos va a proporcionar una solución extremadamente eficiente sin tiempo de ejecución donde podremos aplicar CSS dentro de Javascript.

Para poder aprovechamos de esto, debemos de integrar todas las herramientas que vienen con ello para usarlo en Qwik:

npm run qwik add styled-vanilla-extract

Lo que nos muestra al ejecutar el comando es lo siguiente:

Seleccionamos la opción Yes looks good, finish update! y cuando pase un instante y efectué todas las instalaciones y configuraciones, mostrará algo similar a esto:

Este mensaje está unido a la versión actual de Qwik (v0.18.1, 20-02-2023) por lo que si aparecen versiones superiores, tendréis que investigar un poco. Con el tiempo procuraré ir revisando y haciendo nuevos artículos actualizando algunos aspectos si son breaking changes

Una vez instaladas las dependencias y efectuadas las configuraciones, antes de definir nuestra primera clase CSS dentro de Javascript podemos observar que se ha generado una nueva ruta en src/routes llamada styled-flower para ver la estructura de como trabaja el CSS dentro de Javascript:

Podemos entrar dentro y ver como está por si tenemos curiosidad. Yo no lo haré, me centraré en base a lo que se aplica ahí aplicando un ejemplo para modificar el componente <OrangeComponent/> que hemos implementado usando la función useStylesScoped$() en el apartado anterior.

Creamos dentro de src el directorio styles y dentro de este un fichero llamado colors.css.ts. La ruta quedará definida para ese fichero en src/styles/colors.css.ts

Se mostrará de la siguiente forma:

Dentro del fichero colors.css.ts definimos un bloque de estilos con color naranja donde llamaremos por ejemplo orangeClass

import { style } from 'styled-vanilla-extract/qwik';

export const orangeClass = style({
  display: 'block',
  width: '100%',
  height: '500px',
  background: 'orange',
});

Como se puede observar, para poder aplicar el CSS dentro del código Javascript (Typescript en este caso) debemos de importar la función style desde el paquete que hemos instalado recientemente:

import { style } from 'styled-vanilla-extract/qwik';

Y una vez que ya tenemos esto, implementamos enviando un objeto como argumento, donde implementamos las propiedades de CSS como el ancho del elemento, color de fondo…

export const orangeClass = style({ // <=======
  display: 'block', // Una propiedad
  width: '100%',
  height: '500px',
  background: 'orange',
});

¿Como implementarlo en nuestro componente?

Es muy sencillo, simplemente importamos la constante definida en src/styles/colors.css.ts con el valor constante orangeClass y lo aplicamos introduciendo el valor mediante binding en la propiedad class.

Siguiendo con lo que hemos trabajado en la sección anterior, nos dirigimos a la ruta inicial (src/routes/index.tsx) de nuestro proyecto y realizamos la siguiente implementación:

// Traemos el valor constante de CSS aplicado en Javascript
import { orangeClass } from "~/styles/colors.css";

Eliminamos la función useStylesScoped$() con el contenido de la clase .bg y sustituyendo la class por nuestra nuevo valor CSS en Javascript

...
import { orangeClass } from '~/styles/colors.css';

export const OrangeComponent = component$(() => {
  return (
    <div class={orangeClass}>
      <div>OrangeComponent</div>
    </div>
  );
});
...

El código quedará de la siguiente forma:

import { component$, useStylesScoped$ } from '@builder.io/qwik';
import { DocumentHead, Link } from '@builder.io/qwik-city';
import { orangeClass } from '~/styles/colors.css';

export const OrangeComponent = component$(() => {
  return (
    <div class={orangeClass}>
      <div>OrangeComponent</div>
    </div>
  );
});
export const GreenComponent = component$(() => {
  useStylesScoped$(`
    .bg {
      background-color: green;
    }`);
  return (
    <div class="bg">
      <div>Green Componente</div>
    </div>
  );
});
export default component$(() => {
  ...
});
...

Ahora es el momento de ver los resultados, el componente <OrangeComponent /> recordad que ahora va a tener una altura fija y que aparecerá más expandido verticalmente:

Implementamos una variante para el color verde modificando también la altura fija de orangeClass a 200px:

import { style } from 'styled-vanilla-extract/qwik';

export const orangeClass = style({
    display: 'block',
    width: '100%',
    height: '200px',
    background: 'orange',
});
export const greenClass = style({
    display: 'block',
    width: '100%',
    height: '200px',
    background: 'green',
});

Implementando greenClass dentro del componente <GreenComponent />:

...
import { greenClass, orangeClass } from '~/styles/colors.css';

export const OrangeComponent = component$(() => {
  return (
    <div class={orangeClass}>
      <div>OrangeComponent</div>
    </div>
  );
});
export const GreenComponent = component$(() => {
  return (
    <div class={greenClass}>
      <div>Green Componente</div>
    </div>
  );
});
...

Y se mostrará de la siguiente forma:

Si os habéis fijado, tenemos en común prácticamente todas las propiedades excepto el color. ¿Como podemos crear una opción para reutilizar las propiedades del bloque? Recordad, es trabajar con Javascript, por lo que podemos crear un objeto independiente y aplicar esas propiedades que se usan en las dos clases. Vamos a por ello implementando de la siguiente forma:

import { style } from 'styled-vanilla-extract/qwik';

// Objeto con propiedades en común
const contenBlockClass = {
    display: 'block',
    width: '100%',
    height: '200px',
};
export const orangeClass = style({
    ...contenBlockClass, // Aplicando las propiedades de contentBlockClass
    background: 'orange',
});
export const greenClass = style({
    ...contenBlockClass, // Aplicando las propiedades de contentBlockClass
    background: 'green',
});

Guardamos y comprobamos:

El resultado es el mismo, por lo que hemos conseguido refactorizar el contenido del bloque y reutilizarlo para dos elementos, pudiendo hacerlo un número indeterminado de veces.

Como nota adicional aun siendo una opción muy popular, este modo de trabajar no es la mejor opción para Qwik. No está optimizado para el rendimiento en tiempo de ejecución y no tienen un buen soporte de transmisión SSR, lo que lleva a un rendimiento degradado del servidor y del cliente. ¿Por qué lo enseño? Creo que está bien enseñar todas las opciones y luego que cada profesional saque sus conclusiones.

Pasamos al último apartado, donde trabajaremos con los styled componentes.

Antes de pasar al siguiente punto, como he hecho en apartados anteriores, os dejo el código de lo que se ha trabajado en este apartado:
https://github.com/mugan86/qwik-basic-example-template/tree/feature/styles-03-css-in-js

Styled Components (Componentes con estilo)

Los styled components son una herramienta popular en ReactJS que se utiliza para escribir CSS dentro de Javascript, que es lo trabajado en el punto anterior.

En este caso hay una diferencia mínima, que ahora en vez de trabajar con objetos, trabajaremos con sintaxis de componentes con estilo Qwik resolviendo el problema del coste en el tiempo de ejecución que se daba en el punto anterior.

Seguiremos con el resultado del punto anterior:
https://github.com/mugan86/qwik-basic-example-template/tree/feature/styles-03-css-in-js

Para trabajar con ello, debéis de ejecutar el comando (si no lo habéis hecho) que se ha ejecutado anteriormente para extraer elemento estilizados con Vanilla Javascript:

npm run qwik add styled-vanilla-extract

Una vez todo instalado y configurado nos dirigimos al fichero colors.css.ts que lo encontramos en src/styles y definimos el estilo mediante los styled components junto con el siguiente código:

import { styled} from 'styled-vanilla-extract/qwik';

export const RedBox = styled.div`
  display: block;
  width: 100%;
  height: 100px;
  background: red;
`;
... (Otro estilos)

Ahora tenemos un nuevo elemento, que será el componente <RedBox /> que lo añadiremos en src/routes/index.tsx junto con los otros dos elementos, para ver como se comporta:

import { greenClass, orangeClass, RedBox } from '~/styles/colors.css';
...
export default component$(() => {
  return (
    <div>
      <h1>Leaflet - Styles</h1>
      <p>Trabajaremos con los estilos</p>
      <RedBox />
      <OrangeComponent/>
      <GreenComponent/>
      ...
    </div>
  );
});

Y el resultado será el siguiente:

Y ahora surge la duda de, ¿Cómo puedo añadir información dentro del styled components llamado <RedBox /> ?

Muy fácil, mediante la adición de contenido abriendo el selector como un nuevo bloque HTML cambiando de lo siguiente:

<RedBox />

A lo siguiente:

<RedBox>
    ¡¡Aquí el contenido con el fondo rojo!!
</RedBox>

Y su resultado será el siguiente:

Con esto, ya aprenderíamos otro concepto de como trabajar con estilos en Qwik. Recordad que hacer uso de los styled components resolvemos el problema del coste en el tiempo de ejecución que se daba en el punto anterior, ¡¡Qué en este caso sería 0!!

Aquí os dejo el resultado de lo trabajado hasta este momento:
https://github.com/mugan86/qwik-basic-example-template/tree/feature/styles-04-styled-components-part-01

A continuación, os propongo una pequeña actividad super fácil, la de convertir los componentes <OrangeComponent /> y <GreenComponent /> en styled components, para resolver el problema que están dando actualmente con el tiempo de ejecución.

El resultado visual debe de ser el mismo, pero optimizando el apartado mencionado del tiempo de ejecución. Sin mirar el resultado, espero que lo intentéis, si habéis entendido todo bien, es super sencillo.

Aquí os dejo el resultado de lo trabajado hasta este momento:
https://github.com/mugan86/qwik-basic-example-template/tree/feature/styles-04-styled-components-part-02

Conclusión

En este artículo hemos avanzado más con Qwik y con lo que hemos aprendido podríamos perfectamente crear proyectos sencillos, sin mucha lógica en el que podríamos ir practicando el tema de layouts, enrutado (Routing), componentes, estilos,…

¿Qué podríamos hacer? Un buen ejercicio para practicar estos aspectos es coger plantillas HTML puras y adaptarlas a un proyecto de Qwik (o cualquier otra tecnología, por si trabajamos en Angular, React,…).

Un sitio para descargar plantillas HTML de manera gratuita y usarlas para nuestros propósitos educativos o incluso para iniciar un nuevo proyecto lo podéis encontrar en el siguiente enlace.

Me gustaría que en los comentarios dejaseis resultados de cosas que vayáis practicando, ya que cuanta más variedad, todo el mundo nos beneficiamos de ello.

Finalizamos el artículo y en el siguiente os voy a enseñar como trabajar integrando Mapas con la librería Leaflet en el que aplicaremos conceptos ya adquiridos con algunos nuevos.

Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:

Anartz Mugika Ledo🤗