Styling

Enlace al repositorio

Además de las formas usuales de utilizar hojas de estilos, y otras integraciones del tipo Talwind, Qwik presenta dos métodos que nos hacen dar un salto de nivel en cuanto a rendimiento: useStyles$ y useStylesScoped$. Vamos a ver cómo se aplica cada una de ellas.

  • Utilizamos useStyles$ cuando queremos aplicar estilos de una manera global. Por ejemplo, si queremos aplicar estilos a la página entera, o a un componente que se renderiza en todas las páginas de la aplicación. La mayor diferencia entre este método y un simple import o estilos inline incluso es que en este caso los estilos se insertan directamente como parte del Server Side Rendering.
  • Utilizamos useStylesScoped$ cuando queremos aplicar a un componente en cuestión, y por lo tanto, solo se cargarán si el componente se encuentra en la vista.

Un ejemplo de useStyles$ puede tener lugar en el archivo root.tsx, que es donde se importa el global.css. Podemos transformar el código para importar el css de la siguiente forma:


    // Path: root.tsx
    import { component$, useStyles$ } from "@builder.io/qwik";
    import {
      QwikCityProvider,
      RouterOutlet,
      ServiceWorkerRegister,
    } from "@builder.io/qwik-city";
    import { RouterHead } from "./components/router-head/router-head";
    
    import styles from "./global.css?inline";
    
    export default component$(() => {
      useStyles$(styles);
    
      return (
        <QwikCityProvider>
          <head>
            <meta charSet="utf-8" />
            <link rel="manifest" href="/manifest.json" />
            <RouterHead />
          </head>
          <body lang="en">
            <RouterOutlet />
            <ServiceWorkerRegister />
          </body>
        </QwikCityProvider>
      );
    });

Y un ejemplo de useStylesScoped$ lo tienes en el estilo que aplicas en por ejemplo el componente Button 


    // Path: src/components/button/button.css
    button {
      background: green;
    }

    // Path: src/components/button/button.tsx
    import { component$, useStylesScoped$ } from "@builder.io/qwik";
    import styles from "./button.css?inline";

    export const Button = component$(() => {
      useStylesScoped$(styles);

      return <button>Botón estilado</button>;
    });

Aquí tienes un vídeo en el que ves la interacción de ambos métodos en acción. Verás que hay dos páginas: ambas tendrán una serie de estilos globales, pero solamente la segunda cargará los estilos del button

Espero que te haya gustado esta lección. Vamos ahora a entrar de llenos en nuestro primer método de Qwik: useSignal.

Volver a ver IntegracionesIr a useSignal