クラスの小道具を使用してマテリアルUIに複数のクラスを追加する方法

css-in-jsメソッドを使用してreactコンポーネントにクラスを追加するには、複数のコンポーネントを追加するにはどうすればよいですか？

クラス変数は次のとおりです。

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

これが私がそれをどのように使用したかです：

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

上記は機能しますが、classNamesnpmパッケージを使用せずに両方のクラスを追加する方法はありますか？何かのようなもの：

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

文字列補間を使用できます。

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

このパッケージをインストールできます

https://github.com/JedWatson/classnames

そして、このように使用します

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'

clsxを使用できます。MUIボタンの例で使用されていることに気づきました

最初にインストールします。

npm install --save clsx

次に、それをコンポーネントファイルにインポートします。

import clsx from 'clsx';

次に、インポートした関数をコンポーネントで使用します。

<div className={ clsx(classes.container, classes.spacious)}>

コンポーネントに複数のクラスを適用するには、適用するクラスをclassNames内でラップします。

たとえば、あなたの状況では、コードは次のようになります。

import classNames from 'classnames';

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

<div className={classNames(classes.container, classes.spacious)} />

必ずclassNamesをインポートしてください!!!

1つのコンポーネントで複数のクラスを使用してカスタマイズされたボタンを作成するマテリアルUIドキュメントをご覧ください

拡張プロパティを使用することもできます（jss-extendプラグインはデフォルトで有効になっています）。

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

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

私はこれがあなたの問題を解決すると思います：

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

および反応コンポーネント内：

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

はい、jss-composesはこれを提供します：

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

そして、classes.spaciousを使用するだけです。

classNames パッケージは、次のように高度に使用することもできます。

import classNames from 'classnames';

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true }); // => 'btn-primary'

この方法で、複数の文字列クラスと変数クラスまたは小道具クラスを同時に追加できます。

className={`${classes.myClass}  ${this.props.classes.myClass2} MyStringClass`}

同時に3つのクラス

要素に複数のクラス名を割り当てたい場合は、配列を使用できます。

したがって、上記のコードで、this.props.classesが['container'、 'spacious']のようなものに解決される場合、つまり

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

あなたは単にそれをdivに割り当てることができます

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

結果は次のようになります

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

すでに述べたように、文字列補間を使用できます

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

そして、あなたはclassnamesライブラリ、 https：//www.npmjs.com/package/classnamesを試すことができます