August 14, 2024

Cómo Cargar y Encapsular CSS en Componentes de Next.js

React
HTML/CSS

En Next.js, tienes varias formas de cargar y encapsular CSS para un componente específico. Aquí te explico las más comunes:

1. CSS Modules

Es la forma más recomendada para encapsular el CSS en un componente específico. Los estilos definidos en un módulo CSS se aplican solo a ese componente.

Pasos:

Crea un archivo CSS con el sufijo .module.css.

Importa ese archivo en tu componente.

Ejemplo:

Crear un archivo de CSS:

styles/Button.module.css

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

Importar y usar en el componente:

components/Button.js

import styles from './Button.module.css';

export default function Button() {
  return <button className={styles.button}>Click Me</button>;
}

2. Styled JSX

Next.js soporta styled-jsx de forma nativa. Con styled-jsx, puedes escribir CSS directamente en el archivo del componente, y ese CSS estará encapsulado y aplicado solo a ese componente.

Ejemplo:

components/Button.js

export default function Button() {
  return (
    <>
      <button className="button">Click Me</button>
      <style jsx>{`
        .button {
          background-color: blue;
          color: white;
          padding: 10px 20px;
          border-radius: 5px;
        }
      `}</style>
    </>
  );
}

3. Styled Components

Puedes usar librerías como styled-components para encapsular estilos. Necesitas instalar styled-components y luego puedes usarlo para definir estilos dentro del componente.

Pasos:

Instala styled-components:

npm install styled-components

Usar en el componente:

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

export default function MyButton() {
  return <Button>Click Me</Button>;
}

4. CSS-in-JS Libraries (Emotion, etc.)

Además de styled-components, existen otras librerías CSS-in-JS como Emotion que puedes utilizar de manera similar para encapsular estilos a nivel de componente.

Ejemplo con Emotion****:

Instalar Emotion:

npm install @emotion/react @emotion/styled

Usar en el componente:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

export default function Button() {
  return <button css={buttonStyle}>Click Me</button>;
}

Pregunta de Comprensión

¿Cuál de las formas que te he explicado crees que es la más adecuada para un proyecto en el que quieres asegurarte de que los estilos no se compartan accidentalmente entre componentes? ¿Por qué?

Written by Pol Valle

I'm particularly drawn to building apps that are not only functional but also visually appealing and easy to use. I do it by applying SOLID principles, clean architecture and testing to ensure quality.

export default function Button() { return ( <> <button className="button">Click Me</button> <style jsx>{` .button { background-color: blue; color: white; padding: 10px 20px; border-radius: 5px; } `}</style> </> ); }

import styled from 'styled-components'; const Button = styled.button` background-color: blue; color: white; padding: 10px 20px; border-radius: 5px; `; export default function MyButton() { return <Button>Click Me</Button>; }

/** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; const buttonStyle = css` background-color: blue; color: white; padding: 10px 20px; border-radius: 5px; `; export default function Button() { return <button css={buttonStyle}>Click Me</button>; }