如何在React中使用scs时向html元素添加多个className

我有一个styles.module.scss文件和一个react组件。如何将样式中的多个className添加到一个html元素中？

以下是我的代码：

/styles/styles.module.scss 文件

.gridContainer {
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 25em;
  grid-template-rows: auto;
}

.gridItem {
  display: flex;
  flex-flow: column;
}

.imageWithText {
  border: 1px solid #4338ca;
  border-radius: 1.6rem;
  align-self: start;
}

/pages/infoPage.tsx 文件

import styles from "../styles/styles.module.scss";

export default function InfoPage({}: PageProps) {
  <div className={styles.gridContainer}>
    <div className={styles.gridItem}>
      ...
    </div>
    
    {/* I have added TWO style selectors here */}
    <div className={(styles.gridItem, styles.imageWithText)}>
      ...
    </div>
  </div>
}

当我运行这段代码时，带有两个样式选择器的div无法按预期工作。第二个classname={styles.gridItem}不接受.gridItem选择器中的scs样式。此div仅采用.imageWithText的样式。

预期行为：我希望.gridItem和.imageWithText的样式都应用于第二个div。

我认为我没有正确地在html元素中编写多个选择器，这可能与scss的工作方式有关。如有任何帮助，将不胜感激。