在html元素上使用带有字符串类名的aphrodite样式对象的CSS-In-Js

Question

我的现有项目使用Bootstrap，如下所示：

<ul className=”nav navbar-nav”>

但是阿芙罗狄蒂要求这样的东西：

<ul className={css(styles.red)}>

问题：

如何将这两种方法合并？

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

Answer 1

您可以使用ES6模板文字：

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

或者join()方法：

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

示例：https://codesandbox.io/s/o7l833lym6