css - una - Cómo agregar varias clases en la interfaz de usuario del material usando los accesorios de las clases

que es un selector en css

Question

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
},
});

Aquí es cómo lo usé:

    return (
     <div className={ this.props.classes.container }>

Lo anterior funciona, pero ¿hay una manera de agregar ambas clases, sin usar el paquete classpm Npm? Algo como:

     <div className={ this.props.classes.container + this.props.classes.spacious}>

Answer 1

Creo que esto resolverá tu problema:

const styles = theme => ({
 container: {
  display: ''flex'',
  flexWrap: ''wrap''
},
 spacious: {
  padding: 10
},
});

y en reaccionar componente:

<div className={`${classes.container} ${classes.spacious}`}>

Answer 2

Puedes usar interpolación de cuerdas:

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

Answer 3

Sí, jss-composes te proporciona esto:

const styles = theme => ({
 container: {
  display: ''flex'',
  flexWrap: ''wrap''
},
 spacious: {
  composes: ''$container'',
  padding: 10
},
});

Y luego solo usas clases.Espacioso.

Answer 4

Si desea asignar varios nombres de clase a su elemento, puede utilizar matrices .

Entonces, en el código anterior, si this.props.classes se resuelve en algo como [''container'', ''spacious''], es decir, si

this.props.classes = [''container'', ''spacious''];

simplemente puede asignarlo a div como

<div className = { this.props.classes.join('' '') }></div>

y el resultado será

<div class=''container spacious''></div>

Answer 5

También puede usar la propiedad extend (el complemento jss-extend está habilitado por defecto):

const styles = theme => ({
  container: {
    display: ''flex'',
    flexWrap: ''wrap''
  },
  spaciousContainer: {
    extend: ''container'',
    padding: 10
  },
});

// ...
<div className={ this.props.classes.spaciousContainer }>

Answer 6

puedes instalar este paquete

https://github.com/JedWatson/classnames

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''