Usando el método css-in-js para agregar clases a un componente de reacción, ¿cómo agrego múltiples componentes?
Aquí está la variable de clases:
const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, });Así es como lo usé:
return (<div className={ this.props.classes.container }>) Lo anterior funciona, pero ¿hay alguna forma de agregar ambas clases sin usar el paquete classNames npm? Algo como:
<div className={ this.props.classes.container + this.props.classes.spacious}>puedes usar la interpolación de cadenas:
<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>Podrías usar clsx . Lo noté usado en los ejemplos de botones MUI
Primero instalarlo:
npm install --save clsx
Luego impórtelo en su archivo de componentes:
import clsx from 'clsx';
Luego use la función importada en su componente:
<div className={ clsx(classes.container, classes.spacious)}>
puedes instalar este paquete
https://github.com/JedWatson/nombres de clase
y luego usarlo así
classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar' // lots of arguments of various types classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' // other falsy values are just ignored classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'