在反应中的一个元素中添加两个烤肉串案例 css class

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']添加到类名中？ 我试过逗号，它不起作用。

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}
    >
    ...
}