CssModule同元素使用多个ClassName

错误的方式

<div classNames={styles.className1,styles.className2}></div> // ×
<div classNames={styles.className1 styles.className2}></div> // ×

正确的方式

// 使用es6新增模版字符串方法
<div classNames={`${styles.className1} ${styles.className2}`}></div>
// 使用Array.join()方法拼接字符串
<div classNames={[styles.className1,styles.className2].join(' ')}></div>

可以发现无论如何操作，只要最终拼接的字符串是 className1 className2这种形式就可以。

为了简化每次使用的操作，可以使用join进行封装

/**
 * @description: className join, CSS modules 同时使用两个class简化处理
 * @param {array} classNames cj(styles.className1,styles.className2)
 * @return {*}
 * @author: Carmineprince
 */
export const cj = (...classNames: any[]) => {
  return classNames.join(' ');
};

使用：

import * as React from 'react'
import { cj } from '@/utils/tool.ts'
import { s } from './index.less'

const Home : React.FC = () => {
    return <div className={cj(s.className1,s.className2)}>测试</div>
}