在反應中的一個元素中添加兩個烤肉串案例 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}
    >
    ...
}