Aplicar estilos condicionales en React

1. Estilos condicionales en React
2. Aplicar clases condicionales en React

React es un marco front-end popular porque le brinda la libertad de crear una interfaz de usuario hermosa y receptiva. El estilo es uno de los aspectos más importantes de este proceso.

En este artículo, queremos mostrar varias formas de aplicar estilos condicionales en React.

Estilos condicionales en React

La biblioteca le permite almacenar entradas de usuario como valores y aplicar estilos condicionales dependiendo de las acciones y entradas generales del usuario.

Aplicar estilos condicionales en línea en JSX

La primera y obvia forma es definir estilos en línea. A diferencia de HTML, los estilos en línea en JSX son JavaScript válidos.

Por esta razón, puede usar operadores ternarios para establecer una condición para determinar el valor de un estilo determinado. Por ejemplo, puede hacer lo siguiente:

export default function App() {
  let danger = true;
  return (<div className = 'App'><h1 style = {
    {
      color: danger ? 'red' : 'green'
    }
  }>Some Text</h1>
    </div>);
}

Esto se traduce en: si el valor de la variable peligro es verdadero, entonces la propiedad CSS color debe tener el valor rojo. Si no, será verde.

Puede definir objetos de estilo fuera de JSX, así como dentro de él. Debe usar llaves dobles si aplica estilos directamente al invocar el componente.

Necesita el primer par de llaves para decirle a JSX que el contenido dentro es una expresión de JavaScript. Necesita el segundo par como etiquetas de apertura y cierre para un objeto en JavaScript.

Aquí se explica cómo definir el objeto estilo fuera de JSX y solo hacer referencia a él en JSX:

export default function App() {
  let danger = true;
  let inlineStyle = { color: danger ? "red" : "green" };
  return (
    <div className="App">
      <h1 style={inlineStyle}>Some Text</h1>
    </div>
  );
}

Este es un enfoque más legible para definir estilos en línea para algunas personas. Vaya a CodeSandbox para ver la demostración en vivo.

Aplicar clases condicionales en React

Algunas personas prefieren aplicar clases en lugar de estilos en línea. El principio es el mismo.

Usamos operadores ternarios para generar un nombre de clase dinámico. Puede ir aún más lejos y proporcionar tres opciones:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={danger? 'dangerText': warning ? : 'warningText' : 'regularText'}>Some Text</h1>
    </div>
  );
}

En este caso, comprobamos si la variable peligro es verdadera.

Si lo es, aplicamos la clase dangerText. Si no, volvemos a comprobar si la variable advertencia es verdadera.

Si es así, aplicamos la clase warningText. Si no, aplicamos regularText.

Tenga en cuenta que usamos el atributo className para aplicar clases a elementos en JSX.

La aplicación condicional de clases en lugar de estilos en línea le brinda más libertad para personalizar la apariencia de los elementos mediante CSS.

Usar literales de plantilla para aplicar condicionalmente clases en React

También puede usar literales de plantilla para aplicar el valor de una variable como nombre de clase. Luego puede cambiar dinámicamente el valor de la variable.

También puede combinar nombres de clase estáticos y dinámicos. Echemos un vistazo al ejemplo:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 classNamme={`large ${errorNotification}`}>Some Text</h1>
    </div>
  );
}

Si la variable errorNotification contiene un valor warning, entonces el atributo className tendrá dos valores, large y warning.

Use el paquete classnames para aplicar clases condicionalmente en React

Finalmente, mucha gente usa un paquete externo llamado classnames para aplicar clases en React de forma dinámica.

La función classnames() acepta un objeto con nombres de clase potenciales como propiedades y condiciones para aplicarlos como valores. Vamos a ver:

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={classNames({warningText: error})}>Some Text</h1>
    </div>
  );
}

Lea los documentos oficiales para obtener más información sobre la funcionalidad del paquete.