在寫樣式的時候，有時候會有公共 class 和 特定 class 組合的形式，這樣可以減少 css 的程式碼量。
給 react 中的元素新增多個 className 的方式有 3 種：
1、使用 classnames 庫
npm install classnames --save 安裝依賴
import classnames from 'classnames' 引入依賴
使用：

<div className={classnames(styles.signStateStyle, styles.applyCodeStyle)}>預約碼</div>
// <div class="antd-pro-pages-mobile-product-list-index-signStateStyle antd-pro-pages-mobile-product-list-index-applyCodeStyle">預約碼</div>
 

<div className={classnames({ class1: true, class2: false })}>預約碼</div>
// <div class="class1">預約碼</div>
// true 渲染此class，false 不渲染此class。根據實際情況換成自己的條件。

<div className={classnames('class3', { class1: true, class2: false })}>預約碼</div>
// <div class="class3 class1">預約碼</div>

<div className={classnames('class3', { class1: true }, { class2: false })}>預約碼</div>
// <div class="class3 class1">預約碼</div>
 

2、使用模板字串拼接

<div className={`${styles.signStateStyle} ${styles.signed}`}>預約碼</div>
// <div class="antd-pro-pages-mobile-product-list-index-signStateStyle antd-pro-pages-mobile-product-list-index-signed">已簽約</div>

3、陣列拼接

<div className={[styles.signStateStyle, styles.signing].join(' ')}>預約碼</div>;
// <div class="antd-pro-pages-mobile-product-list-index-signStateStyle antd-pro-pages-mobile-product-list-index-signing">簽約中</div>