DEV Community

Franco Andrés
Franco Andrés

Posted on • Updated on • Originally published at gdevtown.netlify.app

Cómo aplicar una configuración global con Styled Components o Styled JSX

Hoy en día se a puesto muy de moda usar el concepto CSS-in-JS, básicamente es escribir CSS dentro de JavaScript, vaya la redundancia.

En este post no voy a hablar por qué se creo este concepto y que beneficios tiene o desventajas, solo quiero explicar cómo se debe implementar una configuración global de los estilos, es bastante simple y quizás no era necesario escribir este post pero bueno puede servir.

No tengo mucha experiencia en este concepto, al principio no entendía como se aplicaba una configuración global hasta que leí la documentación y vi algunos repositorios en github para ver cómo otros desarrolladores lo aplicaban.

Existen varias librerías pero en este caso solo hablaré de Styled Components y Styled JSX.

Styled Components

Creamos un archivo llamado index.js o global.js o el nombre que tú quieras y luego importamos Styled Components.

import { createGlobalStyle } from "styled-components";
Enter fullscreen mode Exit fullscreen mode

Forma de aplicar la configuración global.

Ejemplo:

import { createGlobalStyle } from "styled-components";

export const Global = createGlobalStyle`
  :root {
    --background-color: #eeeeee;
  }

  html,
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,  Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #2a2a2a;
    background: var(--background-color);
  }

  *, *::after, *::before {
    margin: 0;
  }
`;
Enter fullscreen mode Exit fullscreen mode

Luego debemos importar nuestra configuración global en el archivo principal de nuestro proyecto, por ejemplo en el index.js

import React from "react";
import { render } from "react-dom";
import { Header, Footer } from "./components/index";
import { Global } from "./styles/index";

function App() {
  return (
    <>
      <Global /> // Colocamos los estilos en la función principal del proyecto. 
      <Header />
      <Footer />
    </>
  )
}

const root = document.getElementById("root");

render(<App />, root);
Enter fullscreen mode Exit fullscreen mode

Styled JSX

Está librería fue creada por Vercel la empresa que desarrollo y mantiene el framework NextJS.

Para poder utilizar Styled JSX se debe hacer lo siguiente:

<style jsx>{``}</style>
Enter fullscreen mode Exit fullscreen mode

Se debe colocar las llaves y luego los literal String y dentro escribir los estilos.

Para aplicar la configuración global se debe colocar el atributo global después del JSX, se vería así: <style jsx global>.

Ejemplo:

<style jsx global>{`
  :root {
    --text-color: violet;
  }

  html,
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,  Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text-color);
  }

  *, *::after, *::before {
    margin: 0;
  }

`}</style>
Enter fullscreen mode Exit fullscreen mode

En NextJS la configuración global debería estar en el archivo Layout.js, también vas a encontrar que se debe importar en el archivo _app.js.

Ejemplo de Layout.js:

import Head from 'next/head'

export default function Layout({ children, pageTitle, description, ...props }) {
  return (
    <>
      <Head>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <meta charSet='utf-8' />
        <meta name='Description' content={description}></meta>
        <title>{pageTitle}</title>
      </Head>
      <style jsx global>{`
        :root {
          --text-color: violet;
        }

        html,
        body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,  Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          color: var(--text-color);
        }

        *, *::after, *::before {
          margin: 0;
        }

      `}</style>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Cómo puedes ver es bastante simple, personalmente me gusta más Styled Components.

Espero que este post tonto te sea de ayuda!

Puedes leer esta lección de NextJS para más detalles: Global Styles NextJS.

¡Cuídate y feliz codificación! 👍🏻

Top comments (0)