web-dev-qa-db-ja.com

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

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

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

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

使用方法は次のとおりです。

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

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

     <div className={ this.props.classes.container + this.props.classes.spacious}>
cssreactjsmaterial-designmaterial-uijss
42
fatahn

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

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

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

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

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

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

import classNames from 'classnames';

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

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

ClassNamesをインポートしてください!!!

material ui documentation をご覧ください。1つのコンポーネントで複数のクラスを使用して、カスタマイズされたボタンを作成します。

11
will92

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

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

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

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

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

そして、classes.spaciousを使用します。

5
Oleg Isonen

これで問題が解決すると思います：

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

そして、reactコンポーネントで：

<div className={`${classes.container} ${classes.spacious}`}>
5
Kalim M Vazir

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

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

npm install --save clsx

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

import clsx from 'clsx';

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

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

1
Razzlero

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

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

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

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

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

結果は

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