React usando estilos CSS

Hay varias formas de usar CSS en aplicaciones React.

A continuación se presentan algunas formas comunes y una explicación detallada de cómo implementarlas en React.

Estilos en línea

En React, usar estilos CSS directamente dentro de un elemento se logra mediante estilos en línea.

Los estilos en línea consisten en pasar los estilos CSS directamente como un objeto a la propiedad style del elemento. Cada propiedad de estilo se representa en notación camelCase, en lugar de los nombres tradicionales de propiedades CSS.

Uso directo dentro del elemento:

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

También puede crear un objeto con la información de estilo y referenciarlo en la propiedad style:

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  // Definir el objeto de estilos en línea
  const containerStyle = {
    padding: '20px',
    backgroundColor: '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, world!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

En el ejemplo anterior, containerStyle y titleStyle son dos objetos de estilos en línea que se aplican respectivamente a los elementos div y h1. Estos son los puntos clave:

  • Utilice notación camelCase para las propiedades CSS (por ejemplo,backgroundColoren lugar debackground-color）。
  • Todos los valores de las propiedades de estilo se pasan como cadenas (excepto los valores numéricos que se pueden usar directamente, React agregará las unidades automáticamente).

Los estilos en línea también pueden cambiar dinámicamente según el estado del componente:

Ejemplo

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const [isHighlighted, setIsHighlighted] = useState(false);

  const containerStyle = {
    padding: '20px',
    backgroundColor: isHighlighted ? '#ffff99' : '#f0f0f0'
  };

  const titleStyle = {
    fontSize: '24px',
    color: '#333'
  };

  return (
    <div style={containerStyle}>
      <h1 style={titleStyle}>Hello, world!</h1>
      <button onClick={() => setIsHighlighted(!isHighlighted)}>
        Toggle Highlight
      </button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Mediante archivos de estilo

Puede escribir estilos CSS en un archivo separado, simplemente use.cssGuarde el archivo con la extensión de archivo y luego impórtelo en su aplicación.

Cree un archivo de estilos llamado App.css y agregue el siguiente código CSS:

Ejemplo

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Importe el estilo App.css en su aplicación:

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Módulos CSS

Otra forma de agregar estilos a una aplicación es usar Módulos CSS.

Los Módulos CSS son una convención de nomenclatura para archivos CSS de ámbito local. Con este método, los nombres de clases CSS y los nombres de animaciones tienen ámbito local por defecto.

Los Módulos CSS son muy convenientes para componentes colocados en archivos separados.

Use.module.cssla extensión para crear un Módulo CSS, por ejemplo: MyComponent.module.css.

Ejemplo

/* MyComponent.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

Importe la hoja de estilos en la aplicación:

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, world!</h1>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);
Otras extensiones