¿Cómo usar estilos en ReactJS?

React es una biblioteca front-end de Javascript que se utiliza para crear aplicaciones de una sola página (SPA). Las aplicaciones de React se pueden diseñar fácilmente asignando los estilos a la propiedad className. 

Hay varias formas de diseñar una aplicación de reacción. En este artículo, vamos a discutir las siguientes cuatro formas de diseñar una aplicación de reacción. 

1. Uso de estilos en línea
2. Usando el archivo CSS
3. Usando el módulo CSS
4. Uso de componentes con estilo

Configuración del proyecto: podemos crear la aplicación React usando el comando mencionado a continuación en la línea de comando.

npx create-react-app name_of_the_app

Nota: para seguir el ejemplo, elimine todo el contenido de los archivos App.js y App.css.

Estilo usando estilos en línea: para aplicar los estilos en línea a los elementos, usamos la propiedad de estilo. Pasamos un objeto con clave como propiedades CSS en camelCase y valor como los valores que se pueden asignar a estas propiedades CSS.

Sintaxis: La sintaxis para asignar estilos en línea a elementos CSS se menciona a continuación.

<div style={{backgroundColor: 'red'}}></div>

Nombre de archivo: App.js El contenido del archivo App.js se menciona en el código que se proporciona a continuación, en el que hemos agregado un estilo en línea a los elementos de React. 

const App = () => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
        backgroundImage: 
          "linear-gradient(to right, #427ceb, #1dad6f)",
      }}
    >
      <h1 style={{ color: "white" }}>GeeksForGeeks</h1>
    </div>
  );
};
  
export default App;

Paso para ejecutar la aplicación: Use el siguiente comando para iniciar la aplicación.

npm start

Salida: abra el navegador y vaya a http://localhost:3000 , verá la siguiente salida.

Nota: Para todos los ejemplos dados a continuación, la salida permanecerá como arriba solamente. Aunque puede verificarlo al final pegando el contenido de los archivos App.js y App.css y ejecutando la aplicación React en su dispositivo.

Estilo usando el archivo CSS: para aplicar estilo a los elementos React usando el archivo CSS, primero importamos el archivo CSS y luego asignamos las clases contenidas en el archivo CSS a la propiedad className de los elementos React. 

Sintaxis: La sintaxis para asignar las clases a la propiedad className se menciona a continuación. 

<div className="name_of_the_class"></div>

Nombre de archivo: App.js El contenido de los archivos App.js y App.css que demuestra el uso de archivos CSS para diseñar elementos de React se menciona a continuación.

import './App.css';
  
const App = () => {
  return (
    <div className='container-div'>
      <h1 className='heading'>GeeksForGeeks</h1>
    </div>
  );
};
  
export default App;

.container-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(
          to right, #427ceb, #1dad6f);
}
  
.heading {
    color: white;
}

Diseñar usando el módulo CSS: los módulos CSS son una forma de abarcar localmente el contenido de su archivo CSS. Podemos crear un archivo de módulo CSS nombrando nuestro archivo CSS como App.modules.css y luego se puede importar dentro del archivo App.js usando la sintaxis especial que se menciona a continuación.

Sintaxis:

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

Ahora podemos asignar fácilmente las clases a las propiedades className que se mencionan a continuación.

<div className={styles['container-div']}> 
    <h1 className={styles.heading}>GeeksForGeeks</h1>
</div>

El corchete se usa para acceder a la clase cuando contiene un guión o también podemos usarlo en general. El punto se puede usar para acceder a la clase cuando no contiene un guión. 

Nombre de archivo: App.js El contenido de los archivos App.js y App.css que demuestran el uso de módulos CSS para diseñar el elemento React se menciona a continuación.

import styles from './App.module.css';
  
const App = () => {
  return (
    <div className={styles['container-div']}>
      <h1 className={styles.heading}>GeeksForGeeks</h1> 
    </div>
  );
};
  
export default App;

.container-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(
          to right, #427ceb, #1dad6f);
}
  
.heading {
    color: white;
}

Estilo usando componentes con estilo: los componentes con estilo son un paquete de terceros que nos ayuda a crear un nuevo componente con estilo basado en el elemento React y los estilos CSS que se le proporcionan. 

Instalación del módulo: para usar los componentes con estilo, primero debe instalarlo como una dependencia usando el siguiente comando desde la línea de comandos.

npm install styled-components

Sintaxis: para crear un componente con estilo, puede usar la sintaxis que se menciona a continuación.

import styled from 'styled-components';
const GeeksHeading = styled.h1`
  color: white;
`;

El código anterior creará un nuevo componente basado en el elemento h1 y lo diseñará con las propiedades CSS que se le pasan. El contenido del archivo App.js que demuestra el uso de componentes con estilo se menciona a continuación.

import styled from 'styled-components';
  
const PageDiv = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: linear-gradient(
      to right, #427ceb, #1dad6f);
`;
  
const GeeksHeading = styled.h1`
  color: white;
`;
  
const App = () => {
  return (
    <PageDiv>
      <GeeksHeading>GeeksForGeeks</GeeksHeading>
    </PageDiv>
  );
};
  
export default App;