在react中的元素中添加两个kebab-case-css类

Question

import React from 'react';
import styles from './stylesheet.moudle.css'
<div className={styles['first-style'] styles['second-style']}>
some content
</div>

如何将styles['second-style']添加到className中？我试过逗号，但它不起作用。

Answer 1

用解决

<div className={`${styles['first-style']} ${styles['second-style']}`}>

Answer 2

我更喜欢使用类名npm模块https://www.npmjs.com/package/classnames

你可以用一种干净的方式做更复杂的事情。

import classNames from 'classNames'
const condition = true;
<div className={
classNames(
styles.first-style,
styles.second-style,
{'styles.some-other-conditional-classname': condition})}>

Answer 3

您也可以使用clsx。

const Toolbar = ({
className,
...rest
}) => {
<Component
className={clsx(classes.root, className)}
{...rest}
>
...
}