142

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

13 回答 13

270

您可以使用字符串插值：

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>
于 2017-09-06T04:17:40.553 回答
75

你可以使用clsx。我注意到它在MUI 按钮示例中使用

首先安装它：

npm install --save clsx

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

import clsx from 'clsx';

然后在您的组件中使用导入的函数：

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

于 2019-07-24T01:03:03.433 回答
49

你可以安装这个包

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'
于 2017-09-06T05:41:45.460 回答
22

要将多个类应用于一个组件，请将要应用的类包装在 classNames 中。

例如，在您的情况下，您的代码应如下所示，

import classNames from 'classnames';

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

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

确保你导入类名！！！

查看材料 ui 文档，其中他们在一个组件中使用多个类来创建自定义按钮

于 2019-02-11T00:12:26.477 回答
12

您还可以使用 extend 属性（默认启用jss-extend 插件）：

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

// ...
<div className={ this.props.classes.spaciousContainer }>
于 2018-02-09T15:25:27.103 回答
9

我认为这将解决您的问题：

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

在反应组件中：

<div className={`${classes.container} ${classes.spacious}`}>
于 2018-10-22T16:31:00.450 回答
9

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

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

三个班同时

于 2020-05-05T07:59:23.683 回答
6

是的，jss-composes 为您提供：

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

然后你只需使用 classes.spacious。

于 2017-09-06T05:48:47.957 回答
3

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'
于 2020-02-09T22:31:25.493 回答
2

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

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

这个链接有帮助。

于 2021-04-07T10:29:13.580 回答
0

它可以通过解构轻松完成，毕竟这些是 JavaScript 对象：

const truncate = {
  width: '100px',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};
email: {
    color: '#747474',
    ...truncate,
  },
于 2021-06-01T12:30:30.670 回答
-1

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

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

你可以试试classnames图书馆， https://www.npmjs.com/package/classnames

于 2020-01-29T08:26:30.463 回答
-1

如果要为元素分配多个类名，可以使用数组。

所以在你上面的代码中，如果 this.props.classes 解析为 ['container', 'spacious'] 之类的东西，即如果

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

您可以简单地将其分配给 div 作为

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

结果将是

<div class='container spacious'></div>
于 2017-09-06T05:06:22.627 回答