React的TSX中如何同时使用CSS模块的类名和字符串类名

1.有两种类名方法

import React from 'react';
import styles from './index.less';
const Home: React.FC = () => {
    return (
        <div>
            <h1 className='main'>Welcome to the Home Page</h1>
            <p  className={styles.list}>This is a simple home page.</p>
        </div>
    );
};

export default Home;

2.同时使用时会报错

3.解决方法

3.1字符串拼接（基础方式）​

import React from 'react';
import styles from './index.less';
const Home: React.FC = () => {
    return (
        <div>
            <h1 className={`${styles.list} main`} >Welcome to the Home Page</h1>
            <p className={styles.list}>This is a simple home page.</p>
        </div>
    );
};

export default Home;

3.2classnames 库（推荐方案）​

npm install classnames @types/classnames

import React from 'react';
import styles from './index.less';
import classnames from 'classnames';
const Home: React.FC = () => {
    return (
        <div>
            <h1 className={classnames(styles.list,'main')} >Welcome to the Home Page</h1>
            <p className={styles.list}>This is a simple home page.</p>
        </div>
    );
};

export default Home;