如何使用类道具在 Material UI 中添加多个类？

Question

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

Answer 1

你可以使用字符串插值：

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

Answer 2

如果您希望为您的元素分配多个class名称，您可以使用数组。

所以在上面的代码中，如果 this.props.classes 解析为类似 ['container'、'spacious'] 的内容，即如果

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

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

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

结果将是

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

Answer 3

你可以安装这个包

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'

Answer 4

是的，jss-composes 为您提供了这个：

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

然后您只需使用 classes.spacious。

Answer 5

您还可以使用扩展属性（jss-extend plugin 默认启用）：

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

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

Answer 6

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

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

并在 React 组件中：

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

Answer 7

要将多个类应用到组件，请将要应用的类包裹在 classNames 中。

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

import classNames from 'classnames';

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

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

确保导入类名！！！

看看 material ui documentation 他们在一个组件中使用多个类来创建自定义按钮

Answer 8

你可以使用 clsx. I noticed it used in the MUI buttons examples

首先安装它：

npm install --save clsx

然后在你的组件文件中导入：

import clsx from 'clsx';

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

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

Answer 9

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

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

你可以尝试 classnames 库， https://www.npmjs.com/package/classnames

Answer 10

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'

Answer 11

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

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

三个类同时

Answer 12

您可以使用以下方法：

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

这 link 有帮助。

Answer 13

可以通过结构化轻松完成，毕竟这些是 JavaScript 个对象：

const truncate = {
  width: '100px',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};
email: {
    color: '#747474',
    ...truncate,
  },

如何使用类道具在 Material UI 中添加多个类？

How to add multiple classes in Material UI using the classes props?

css

reactjs

material-design

material-ui

jss

如何使用 类 道具在 Material UI 中添加多个 类？

How to add multiple classes in Material UI using the classes props?

css

reactjs

material-design

material-ui

jss

如何使用类道具在 Material UI 中添加多个类？