Todos estamos familiarizados con la forma estándar de vincular una hoja de estilo En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”. <head> de un documento HTML, ¿verdad? Esa es solo una de las varias formas en que podemos escribir CSS. Pero, ¿cómo se ve el estilo de las cosas en una aplicación de una sola página (SPA), por ejemplo, en un proyecto React?
Resulta que hay varias formas de diseñar una aplicación React. Algunos se superponen con el estilo tradicional, otros no tanto. Pero vamos a contar todas las formas en que podemos hacerlo.
Importación de hojas de estilo externas
Como sugiere el nombre, React puede importar archivos CSS. El proceso es similar a cómo vinculamos el archivo CSS en el HTML <head>:
- Cree un nuevo archivo CSS en el directorio de su proyecto.
- Escribe CSS.
- Importarlo al archivo React.
Me gusta:
import "./style.css";Eso generalmente va en la parte superior del archivo donde ocurren otras importaciones:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;En este ejemplo, un archivo CSS se importa a un App.js del desplegable /Components/css carpeta.
Escribir estilos en línea
Es posible que esté acostumbrado a escuchar que el estilo en línea no es tan bueno para la mantenibilidad y demás, pero definitivamente hay situaciones (¡Aquí hay uno!) donde tiene sentido. Y la mantenibilidad es un problema menor en React, ya que el CSS a menudo ya se encuentra dentro del mismo archivo de todos modos.
Este es un ejemplo súper simple de estilo en línea en React:
<div className="main" style={{color:"red"}}>Sin embargo, un mejor enfoque es usar objetos:
- Primero, cree un objeto que contenga estilos para diferentes elementos.
- Luego agréguelo a un elemento usando el
styleatributo y luego seleccione la propiedad al estilo.
Veámoslo en contexto:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Este ejemplo contiene un styles objeto que contiene dos objetos más, uno para el .main class y el otro para una entrada de texto, que contienen reglas de estilo similares a las que esperaríamos ver en una hoja de estilo externa. Esos objetos se aplican luego a la style atributo de los elementos que están en el marcado devuelto.
Tenga en cuenta que los corchetes se usan cuando se hace referencia a estilos en lugar de las comillas que normalmente usaríamos en HTML sin formato.
Usar módulos CSS
Módulos CSS… qué diablos les pasó a esos, ¿verdad? Tienen el beneficio de las variables de alcance local y se pueden usar junto con React. Pero, ¿qué son, de nuevo, exactamente?
Citando el documentación del repositorio:
Los módulos CSS funcionan compilando archivos CSS individuales tanto en CSS como en datos. La salida de CSS es CSS global normal, que puede inyectarse directamente en el navegador o concatenarse y escribirse en un archivo para uso de producción. Los datos se utilizan para asignar los nombres legibles por humanos que ha utilizado en los archivos al CSS de salida globalmente seguro.
En términos más simples, los módulos CSS nos permiten usar el mismo nombre de clase en varios archivos sin conflictos, ya que a cada nombre de clase se le asigna un nombre programático único. Esto es especialmente útil en aplicaciones más grandes. Cada nombre de clase tiene un ámbito local para el componente específico en el que se está importando.
Una hoja de estilo de módulo CSS es similar a una hoja de estilo regular, solo que con una extensión diferente (p. ej. styles.module.css). Así es como están configurados:
- Crea un archivo con
.module.csscomo la extensión. - Importe ese módulo a la aplicación React (como vimos anteriormente)
- Agrega una
classNamea un elemento o componente y hacer referencia al estilo particular de los estilos importados.
Ejemplo super simple:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Usar componentes con estilo
¿Ha utilizado componentes-estilizados? Es bastante popular y le permite crear componentes personalizados utilizando CSS real en su JavaScript. Un componente con estilo es básicamente un componente de React con, prepárate para ello, estilos. Algunas de las características incluyen nombres de clases únicos, estilos dinámicos y una mejor gestión del CSS, ya que cada componente tiene sus propios estilos independientes.
Instale el paquete npm de componentes con estilo en la línea de comando:
npm install styled-componentsA continuación, impórtalo a la aplicación React:
import styled from 'styled-components'Cree un componente y asígnele una propiedad con estilo. Tenga en cuenta el uso de literales de plantilla indicados por acentos graves en el Wrapper :
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Lo anterior Wrapper El componente se representará como un div que contiene esos estilos.
estilo condicional
Una de las ventajas de los componentes con estilo es que los componentes en sí son funcionales, ya que puede usar accesorios dentro del CSS. Esto abre la puerta a declaraciones condicionales y estilos cambiantes basados en un estado o accesorio.
Aquí hay una demostración que muestra eso:
Aquí, estamos manipulando los div display propiedad en el estado de visualización. Este estado está controlado por un botón que cambia el estado del div cuando se hace clic. Esto, a su vez, alterna entre los estilos de dos estados diferentes.
en línea if declaraciones, usamos un ? en lugar de lo habitual if/else sintaxis. La else parte está después del punto y coma. Y recuerde siempre llamar o usar el estado después de que se haya inicializado. En esa última demostración, por ejemplo, el estado debería estar por encima del Wrapper estilos de componentes.
¡Feliz estilo React!
¡Eso es una envoltura, amigos! Analizamos varias formas diferentes de escribir estilos en una aplicación React. Y no es que uno sea mejor que el resto; el enfoque que utilice depende de la situación, por supuesto. Con suerte, ahora los comprende bien y sabe que tiene un montón de herramientas en su arsenal de estilo React.
