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

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

提问by q3e

Using the css-in-js method to add classes to a react component, how do I add multiple components?

使用css-in-js方法给react组件添加类，如何添加多个组件？

Here is the classes variable:

这是类变量：

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

Here is how I used it:

这是我如何使用它：

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

The above works, but is there a way to add both classes, without using the classNamesnpm package? Something like:

上面的方法有效，但是有没有办法在不使用classNamesnpm 包的情况下添加这两个类？就像是：

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

回答by klugjo

you can use string interpolation:

您可以使用字符串插值：

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

回答by Mini

you can install this package

你可以安装这个包

https://github.com/JedWatson/classnames

https://github.com/JedWatson/classnames

and then use it like this

然后像这样使用它

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'

回答by will92

To have multiple classes applied to a component, wrap the classes you would like to apply within classNames.

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

For example, in your situation, your code should look like this,

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

import classNames from 'classnames';

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

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

Make sure that you import classNames!!!

确保你导入了 classNames！！！

Have a look at material ui documentationwhere they use multiple classes in one component to create a customized button

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

回答by Razzlero

You could use clsx. I noticed it used in the MUI buttons examples

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

First install it:

首先安装它：

npm install --save clsx

npm install --save clsx

Then import it in your component file:

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

import clsx from 'clsx';

import clsx from 'clsx';

Then use the imported function in your component:

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

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

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

回答by VaclavSir

You can also use the extend property (the jss-extend pluginis enabled by default):

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

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

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

回答by Kalim M Vazir

I think this will solve your problem:

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

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

and in react component:

并在反应组件中：

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

回答by Oleg Isonen

Yes, jss-composes provides you this:

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

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

And then you just use classes.spacious.

然后你只需使用classes.spacious。

回答by Hasan Sefa Ozalp

classNamespackagecan also be used as advanced as:

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'

回答by Muzamil301

You can add multiple string classes and variable classes or props classes at same time in this way

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

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

three classes at same time

三班同时上课

回答by Praym

If you want to assign multiple classnames to your element, you can use arrays.

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

So in your code above, if this.props.classes resolves to something like ['container', 'spacious'], i.e. if

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

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

you can simply assign it to div as

你可以简单地将它分配给 div

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

and result will be

结果将是

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