Dar estilo a React usando CSS
Hay muchas formas de diseñar React con CSS, este tutorial analizará más de cerca tres formas comunes:
- estilo en línea
- hojas de estilo CSS
- Módulos CSS
Estilo en línea
Para diseñar un elemento con el atributo de estilo en línea, el valor debe ser un objeto de JavaScript:
Ejemplo:
Inserte 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 entre llaves y, dado que los objetos de JavaScript también usan llaves, el estilo del ejemplo anterior se escribe entre dos conjuntos de llaves {{}}.
camelCased Nombres de propiedad
Dado que el CSS en línea está escrito en un objeto JavaScript, las propiedades con separadores de guiones, como background-color, deben escribirse con la sintaxis de mayúsculas y minúsculas camel:
Ejemplo:
Usar 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 puede crear un objeto con información de estilo y hacer referencia a él en el atributo de estilo:
Ejemplo:
Cree 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>
</>
);
}
¡Obtener la certificación!
$95 INSCRÍBETE
Hoja de estilo 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.
Aplicación.css:
Cree un nuevo archivo llamado "App.css" e inserte un código CSS en él:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Nota: puede llamar al archivo como desee, solo recuerde la extensión de archivo correcta.
Importe la hoja de estilo en su aplicación:
índice.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
Módulos CSS
Otra forma de agregar estilos a su aplicación es usar 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 está disponible solo para el componente que lo importó y no tiene que preocuparse por los conflictos de nombres.
Cree el módulo CSS con la .module.css
extensión, ejemplo: my-style.module.css.
Cree un nuevo archivo llamado "my-style.module.css" e inserte un código CSS en él:
mi-estilo.módulo.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Importe la hoja de estilo en su componente:
Coche.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Importe el componente en su aplicación:
índice.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));