Почему не выводит несколько классов в React компоненте при использовании css модуля для изоляции стилей?

Question

[Василий]

Пытаюсь вывести компонент с двумя классами но модуль css в Reacte выводит только один класс

import React from "react";
import classes from "./LogoComponent.module.scss";

function LogoComponent() {
  console.log(classes);

  return (
    <div className={classes["logo-log-in_layout"], classes["logo-log-in"]}>
      <img
        className={classes["logo-log-in__img"]}
        src="./../img/Logo.svg"
      />
    </div>
  );
}
export default LogoComponent;

И ещё не понятно почему плагин Prettier в VS Code оборачивает после сохранения в круглые скобки вывод классов

<div className={(classes["logo-log-in_layout"], classes["logo-log-in"])}>

Comments

[Andrew]

А зачем вы классы через запятую пишете?

[Василий]

Andrew, Без неё я получаю ошибку

./src/LogoComponent/LogoComponent.js
  Line 8:  Parsing error: Unexpected token, expected ","

   6 | 
   7 |   return (
>  8 |     <div className={(classes["logo-log-in_layout"] classes["logo-log-in"])}>
     |                                                    ^
   9 |       <img
  10 |         className={classes["logo-log-in__img"]}
  11 |         src="./../img/Logo.svg"

[Andrew]

Василий, а если скобки убрать?

<div className={`${classes["logo-log-in_layout"]} ${classes["logo-log-in"]}`}>

Answer 1

[Василий]

В общем если кто-то ещё будет искать вот так решил

className={ [classes["log-in-box"], classes["log-in-box_layout"] ].join(" ")}