要在 React 中使用 CSS 模块时将多个 CSS 类应用于元素，您需要使用实用classnames程序，它可以更轻松地有条件地将 CSS 类名连接在一起。您可以这样做：

1. 安装classnames软件包：

npm install classnames

1. 用于classnames组合 CSS 模块类：

你可以通过以下方法修改Footer组件以使用多个 CSS 类：

```
import React from ‘react’;
import styles from ‘./Footer.module.css’;
import classNames from ‘classnames’;

function Footer(props) {
const { route } = props;
return (

export default Footer;
```

解释：

• 导入classnames：classnames在文件开头导入实用程序。
• 使用classNames：用于classNames(styles.description, styles.yellow)组合两个 CSS 类。这将导致元素同时应用styles.description和styles.yellow类。

CSS 模块示例（Footer.module.css）：

以下是 CSS 模块文件的示例：

/* Footer.module.css */
.footer {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
}

.description {
    font-size: 14px;
    color: #333;
}

.yellow {
    color: yellow;
}

补充说明：

如果你需要根据某些 props 或状态有条件地应用类，classnames也支持这一点。例如：

import React from 'react';
import styles from './Footer.module.css';
import classNames from 'classnames';

function Footer(props) {
    const { route, isActive } = props;
    return (
        <div className={styles.footer}>
            <div className={classNames(styles.description, { [styles.yellow]: isActive })}>
                <p>this site was created by me</p>
            </div>
            <div className={styles.description}>
                <p>copyright nz</p>
            </div>
        </div>
    );
}

export default Footer;

在此示例中，仅当styles.yellow时才会应用该类。isActive``true

使用classnamesCSS 模块可以提供一种灵活而干净的方法来管理 React 组件中的多个条件类名。