CSS modulesで、ベースとなるスタイル + 個別にスタイルを設定したい。

Question

前提

css-in-jsで複数のコンポーネントのベースとなるスタイルGlobalを設定し、各コンポーネントでGlobalスタイルを読み込みつつ、個別にスタイルを設定しています。
下記はデモです。
demo

実現したいこと

css modulesの形式で、ベースとなるスタイル ＋ 個別のスタイルを適用したいです。
下記はcss modulesの形式でのデモです。
demo2

発生している問題・エラーメッセージ

ベースとなるスタイルを読み込めていません。
個別のスタイルは読み込めています。
どのようにベースとなるスタイルを読み込ませればよいか分かりません。

該当のソースコード

App.js

export default function App() {
  return (
    <React.Fragment>
      <A />
      <B />
    </React.Fragment>
  );
}

const A = () => (
  <div className={Astyle.AWrap}>
    <h1>This is A Component</h1>
    <p>This is A Component</p>
  </div>
);

const B = () => (
  <div className={Bstyle.BWrap}>
    <h1>This is B Component</h1>
    <p>This is B Component</p>
  </div>
);

---

Global.module.scss

.global{
  margin: 16px;
  padding: 16px;
}

---

A.module.scss

.AWrap{
  background-color: rgb(100,100,100);
  color: white;
}

試したこと

Global.module.scssをインポートし、各コンポーネントのスタイルの読み込みに、下記のように併記しました。

import Global from "global.module.scss"

<div className={(Global.global, Astyle.AWrap)}>

上記の書き方では、ベースとなるスタイルは適用されませんでした。

Answer 1

- <div className={(Global.global, Astyle.AWrap)}>
+ <div className={`${Global.global} ${Astyle.AWrap}`}>

変数をテンプレートリテラルで文字列に展開し、スペースで区切ると両方のスタイルが反映されました。
複数のclassを適用させたい場合はこのような方法だったり、配列をjoinさせる方法があるみたいですね。

参考:https://stackoverflow.com/questions/33949469/using-css-modules-how-do-i-define-more-than-one-style-name