CSS

 Hay muchas formas de darle estilo a React con CSS. En este tutorial analizaremos en profundidad tres formas comunes:

• Estilo en línea
• Hojas de estilo CSS
• Módulos CSS

Estilo en línea

Para darle estilo a un elemento con el atributo de estilo en línea, el valor debe ser un objeto JavaScript:

Insertar un objeto con la información de estilo:

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

Nota: En JSX, las expresiones de JavaScript se escriben dentro de llaves y, dado que los objetos de JavaScript también usan llaves, el estilo en el ejemplo anterior se escribe dentro de dos conjuntos de llaves {{}}.

Nombres de propiedades en mayúsculas y minúsculas

Dado que el CSS en línea está escrito en un objeto JavaScript, las propiedades con separadores de guion, como background-color, deben escribirse con sintaxis camel case:

Utilice backgroundColoren lugar de background-color:

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

Objeto JavaScript

También puedes crear un objeto con información de estilo y hacer referencia a él en el atributo de estilo:

Crea un objeto de estilo llamado myStyle:

const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={myStyle}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

Hoja de estilos CSS

Puede escribir su estilo CSS en un archivo separado, simplemente guarde el archivo con la .cssextensión de archivo e impórtelo en su aplicación.

Crea un nuevo archivo llamado "App.css" e inserta algo de código CSS en él:

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

Nota: Puedes llamar al archivo como quieras, sólo recuerda la extensión de archivo correcta.

Importa la hoja de estilos en tu aplicación:

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 su aplicación es utilizar módulos CSS.

Los módulos CSS son convenientes para los componentes que se colocan en archivos separados.

El CSS dentro de un módulo solo está disponible para el componente que lo importó y no tiene que preocuparse por conflictos de nombres.

Crea el módulo CSS con la .module.css extensión, ejemplo: my-style.module.css.

Crea un nuevo archivo llamado "my-style.module.css" e inserta algo de código CSS en él:

mi-estilo.modulo.css:

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Importa la hoja de estilos en tu componente:

Coche.js:

import styles from './my-style.module.css'; 

const Car = () => {
  return <h1 className={styles.bigblue}>Hello Car!</h1>;
}

export default Car;

Importa el componente en tu aplicación:

import ReactDOM from 'react-dom/client';
import Car from './Car.js';

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

gfg