如何使用类props在Material UI中添加多个类

时间:2017-09-06 04:12:53

标签: css reactjs material-design material-ui jss

使用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}>

13 个答案:

答案 0 :(得分:58)

你可以使用字符串插值:

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

答案 1 :(得分:30)

您可以安装此软件包

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'

答案 2 :(得分:8)

要对一个组件应用多个类,请将要应用的类包装在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,他们在一个组件中使用多个类来创建自定义按钮

答案 3 :(得分:7)

您还可以使用extend属性(默认情况下启用jss-extend plugin):

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

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

答案 4 :(得分:5)

我认为这可以解决您的问题:

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

和反应成分中:

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

答案 5 :(得分:4)

是的,jss-composes为您提供:

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

然后你只使用classes.spacious。

答案 6 :(得分:2)

classNames package也可以用作高级版本:

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'

答案 7 :(得分:1)

您可以通过这种方式同时添加多个字符串类和变量类或props类

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

同时上三课

答案 8 :(得分:1)

您可以在下面使用此方法:

import clsx from 'clsx';
    
return <div className={clsx(classes.container, 'spacious')} />

link 有帮助。

答案 9 :(得分:0)

如果您希望为元素指定多个类名称,则可以使用数组

所以在上面的代码中,如果this.props.classes解析为类似[&#39;容器&#39;,&#39;宽敞&#39;],即如果

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

您只需将其指定为div

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

,结果将是

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

答案 10 :(得分:0)

您可以使用clsx。我注意到它在MUI buttons examples

中使用了

首先安装它:

npm install --save clsx

然后将其导入您的组件文件中:

import clsx from 'clsx';

然后在组件中使用导入的功能:

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

答案 11 :(得分:0)

它可以通过解构轻松完成,毕竟这些都是 JavaScript 对象:

numbers_raw

答案 12 :(得分:-1)

如前所述,您可以使用字符串插值

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

您可以尝试classnames库, https://www.npmjs.com/package/classnames