react组件中设置多个className

错误写法

<ProCard className={styles.card} className={i % 2 === 0 ? styles.even : styles.odd}>111</ProCard>

正确写法1：使用模板字符串（注意：两个类名中间要有空格）

import styles from './index.less';
<ProCard className={`${styles.card} ${i % 2 === 0 ? styles.even : styles.odd}`}>111</ProCard>

正确写法2：使用join拼接（注意：同上）

import styles from './index.less';
<ProCard className={[styles.card, i % 2 === 0 ? styles.even : styles.odd].join(' ')}>111</ProCard>

样式

.card {
  height: 100px;
  text-align: center;
  border-radius: 10px;
}
.even {
  color: #3061f2;
  background: url('~@/assets/icon_right_bottom_blue.png') right bottom no-repeat,
    url('~@/assets/icon_left_top_blue.png') left top no-repeat, #fff;
}
.odd {
  color: #03b475;
  background: url('~@/assets/icon_right_bottom_green.png') right bottom no-repeat,
    url('~@/assets/icon_left_top_green.png') left top no-repeat, #fff;
}