CSS-In-Js Using aphrodite style object with string class names on one html element

Question

My existing project using Bootstrap and looks like:

<ul className=”nav navbar-nav”>

But Aphrodite asks for something like:

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

Question:

How can I merge these 2 approaches?

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

Answer 1

You can use ES6 template literal:
className={`nav navbar-nav ${css(styles.red)}`}

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

example: https://codesandbox.io/s/o7l833lym6