Diferentes formas de escribir CSS en React trucos CSS

Todos estamos familiarizados con la forma estándar de vincular una hoja de estilo a <head> un documento HTML, ¿verdad? Esta es solo una de varias formas en que podemos escribir CSS. Pero, ¿cómo se ven las cosas de estilo en una aplicación de una página (SPA), digamos en un proyecto React?

Resulta que hay varias formas de diseñar una aplicación React. Algunos se solapan con el estilo tradicional, otros no tanto. Pero vamos a contar todas las formas en que podemos hacerlo.

Importar hojas de estilo externas

Como sugiere el nombre, React puede importar archivos CSS. El proceso es similar a cómo vinculamos un archivo CSS a HTML <head>:

Cree un nuevo archivo CSS en el directorio de su proyecto.
Escribe CSS.
Importarlo al archivo React.

Como esto:

import "./style.css";

Esto generalmente se encuentra en la parte superior del archivo donde se realizan 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 archivo App.js de /Components/css carpeta.

Escribir estilos incorporados

Es posible que esté acostumbrado a escuchar que el estilo incorporado no es tan bueno para el mantenimiento y otras cosas, pero definitivamente hay situaciones (¡aquí hay una!) Que tienen sentido. Y el soporte es un problema menor en React, ya que CSS a menudo ya es un problema. se sienta dentro del mismo archivo de todos modos.

Este es un ejemplo súper simple de un estilo incorporado 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 artículo usando style atributo y luego seleccione la propiedad de estilo.

Veamos esto 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 .main class y la otra para ingresar texto que contiene reglas de estilo similares a las que esperaríamos ver en una hoja de estilo externa. Estos objetos se aplican luego a style atributo de los elementos que están en la marca devuelta.

Tenga en cuenta que las llaves se usan para referirse a estilos, no a las comillas que normalmente usamos en HTML sin formato.

Usar módulos CSS

Módulos CSS… ¿qué diablos les pasó, verdad?

citando documentación del repositorio:

Los módulos CSS funcionan compilando archivos CSS individuales tanto en CSS como en datos. La salida CSS es CSS global normal que se puede inyectar directamente en el navegador o concatenar y guardar en un archivo de producción. Los datos se utilizan para asignar los nombres legibles por humanos que usó en los archivos al CSS de origen globalmente seguro.

En pocas palabras, los módulos CSS nos permiten usar el mismo nombre de clase en varios archivos sin colisiones, ya que a cada nombre de clase se le asigna un nombre de programa único. Esto es especialmente útil para aplicaciones más grandes. Cada nombre de clase se cubre localmente en el componente específico en el que se importa.

La hoja de estilo del módulo CSS es similar a una hoja de estilo regular, solo que con una extensión diferente (por ejemplo, styles.module.css). Así es como se configuran:

Crear un archivo con .module.css como una extensión.
Importe este módulo a la aplicación React (como vimos anteriormente)
Agregar className a un elemento o componente y una referencia al estilo específico de los estilos importados.

Ejemplo súper 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 estilizados

has usado componentes estilizados? Es bastante popular y le permite crear componentes personalizados utilizando CSS real en su JavaScript. Un componente estilizado es básicamente un componente React con estilos: prepárese para ello. Algunas características incluyen nombres de clase únicos, estilo dinámico y una mejor gestión de CSS, ya que cada componente tiene sus propios estilos separados.

Instale el paquete npm de componentes con estilo en la línea de comando:

npm install styled-components

Luego impórtalo a la aplicación React:

import styled from 'styled-components'

Cree un componente y asígnele una propiedad estilizada. Tenga en cuenta el uso de literales de plantilla indicados por barras invertidas en Wrapper objeto:

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 un componente se representará como un div que contiene estos estilos.

estilo condicional

Una de las ventajas de los componentes estilizados es que los componentes en sí son funcionales, ya que puede usar accesorios en CSS. Esto abre la puerta a expresiones condicionales y cambios de estilo basados en la condición o el soporte.

Aquí hay una demostración que muestra esto:

Aquí estamos manipulando a los salvajes. display Mostrar propiedad de estado. Este estado está controlado por un botón que cambia el estado div cuando se hace clic. Esto a su vez cambia entre los estilos de dos estados diferentes.

en línea if declaraciones, usamos un ? en lugar de lo habitual if/else sintaxis else parte está después de un punto y coma. Y no olvide llamar o usar siempre el estado después de que se haya inicializado. En esta última demostración, por ejemplo, la condición debe estar por encima Wrapper estilos de componentes.

¡Feliz estilo Reaccionar!

¡Este es el final, gente! Analizamos algunas formas diferentes de escribir estilos en la aplicación React. Y no es que uno sea mejor que el otro; el enfoque que utilice depende de la situación, por supuesto. Esperamos ahora. Los entendí bien y sé que tienes un montón de herramientas en tu arsenal de estilo React.

Deja una respuesta Cancelar la respuesta