React中為className添加多樣式名的幾種方式

問題需求，我需要在jsx中的className中同時引用SCSS檔案中的.top .A這兩個CSS樣式類，如何實作呢？

.top {
    width: 250px;
    height: 250px;
    font-size: 3rem;
    z-index: 0;
    position: absolute;
  }

  .top:hover {
    box-shadow: 0 0 10px #ccc;
    z-index: 999;
  }

  .A {
    top: 100px;
    left: 100px;
    background: #da110a;
  }      

 解決方法

1、className 利用 ​

​${ }​

​

import CSS from './content.module.scss';
 
<div className={`${CSS.top} ${CSS.A}`}>A</div>      

2、 className傳入數組使用​

​join函數分割​

​

import CSS from './content.module.scss';
 
<div className={[CSS.top,CSS.A].join(' ')}>A</div>      

3、使用第三方插件classNames

安裝插件

npm install classnames      

使用時

import classNames from 'classnames';
import CSS from './content.module.scss';
 
<div className={classNames(CSS.top,CSS.C)}>A</div>      

 參考文獻：