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

小开

最佳答案

你可以使用字符串插值:

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

小开

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

因此，在上面的代码中，如果 this.prop.class 解析为类似于[‘ Container’，‘ wide’]的值，也就是说，如果

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

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

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

结果就是

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

小开

你可以安装这个软件包

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'

小开

是的，jss-poses 为您提供了以下内容:

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

然后你就用教室，很宽敞。

小开

您还可以使用扩展属性(默认情况下启用扩展插件) :

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


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

小开

我想这能解决你的问题:

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

反应组分:

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

小开

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

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

import classNames from 'classnames';


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


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

一定要导入 classNames! ! ！

看看材料用户界面文件，它们在一个组件中使用多个类来创建定制按钮

小开

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

首先安装:

npm install --save clsx

然后将其导入到组件文件中:

import clsx from 'clsx';

然后使用组件中的导入函数:

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

小开

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'

小开

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

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

同时上三节课

小开

你可使用以下方法:

import clsx from 'clsx';
    

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

这个链接有帮助。

小开

这可以通过解析来轻松完成，毕竟，这些都是 JavaScript 对象:

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

小开

你可以像那样在材质 UI 中应用两个类

import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";


const useStyles = makeStyles({
container: {
display: 'flex',
flexWrap: 'wrap',
},
spacious: {
padding: 10,
},
});

一些代码


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

如何使用“材质用户界面”中的比较运算符添加两个类。

如果要使用比较运算符定义一个或两个类，则需要应用


import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";


const useStyles = makeStyles({
maineButton: {
borderRadius: "10px",
minWidth: "80px",
border: "1x solid #dcdcdc",
},
selectedButton: {
border: "1x solid #3f51b5",
},
});

一些代码

const [selected, setSelected] = useState(0);

一些代码

{data?.map((el, index) => (
<ButtonBase
className={classNames(
classes.maineButton,
index === selected && classes.selectedButton
)}
onClick{()=> setSelected(index)}
>
{el.text}
</ButtonBase>
))}

如果选择它将给你两个类

className={classNames(classes.maineButton, classes.selectedButton)}

如果没有，那就只有一个

className={classNames(classes.maineButton)}