React.js问题：如何使用三元运算符将多个类应用于组件？

Question

我想使用三元运算符将多个类应用于组件。有一个共享的ts主题文件，其中包含常规按钮样式，但我想根据屏幕宽度在此特定组件中显示它们的大小，因此也为此添加了本地范围的类。

什么是最好的方法？

...尝试了这个，不起作用：

...让它可以使用classNames进行工作。

Answer 1

我通常使用一个名为classNames：https://www.npmjs.com/package/classnames的小型npm软件包。

它公开了一个带有可变数量参数的函数。如果提供字符串，则基本上将它们加上一个空格，因此将它们全部应用：

<Button className={ classNames('first', 'second') } ...

会像这样：

<Button className="first second" ...

此软件包的一个不错的功能是，它可以接受一个对象，其中键是类，值是一个布尔值，指示是否添加此类，例如：

<Button className={ classNames({ even: index % 2 === 0, disabled: props.isDisabled }) } ...

现在，如果index类似于2，则even类将添加到元素中。

Answer 2

材料UI类被编译为类名字符串，您可以将它们链接在一起，并在每个字符串之间留一个空格：

<Button
  classes={{
    root: isDesktop ? `${classes.saveButton} ${classes.secondStyle}` : classes.disabledSaveButton
  }}
>

如果需要处理更复杂的案件，

npm软件包classnames可以为您提供更简洁的方法。

Answer 3

1. 您可以在css目录中为台式机和移动设备使用两个不同样式的文件，并在索引文件中使用make开关来导出正确的css。 例如：包含=> 2个css文件的样式目录：Mobile，Desktop，并在同一目录index.js中，用于导出右一个。
2. 通过使用主题提供程序： styled-components

Answer 4

您可以使用clsx，如果您使用material-ui，我认为它已经安装了，您可以在material-ui的文档示例中看到它。

import clsx from 'clsx';

// Bellow examples are from the clsx npm site:

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'