如何在Bootstrap项目中合并Aphrodite的CSS-in-JS类名写法？

嘿，这个问题我太清楚啦！你可不能直接写两个className属性——React会直接忽略后面那个，只保留第一个。不过有两种简单靠谱的方法能把二者合并：

• 方法一：使用ES6模板字符串
  这是最简洁的写法，把Bootstrap的固定类和Aphrodite生成的类用空格分隔，放在模板字符串里：

  <ul className={`nav navbar-nav ${css(styles.red)}`}>
  

• 方法二：使用数组+join拼接
  如果需要处理多个动态类名，这种方式更灵活，把所有类名放进数组，再用join(' ')转成空格分隔的字符串：

  <ul className={['nav navbar-nav', css(styles.red)].join(' ')}>
  

小提醒 #

如果Aphrodite的样式和Bootstrap的样式出现冲突，**CSS特异性（specificity）**会决定谁生效——Aphrodite生成的类通常具有更高的特异性，会覆盖Bootstrap的同名样式，开发时要注意这一点哦！

内容的提问来源于stack exchange，提问作者Franva