CSS-In-Js Использование объекта стиля Афродита с именами строковых классов в одном элементе HTML

Question

Мой существующий проект использует Bootstrap и выглядит так:

<ul className=”nav navbar-nav”>

Но Афродита просит что-то вроде:

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

Вопрос:

Как я могу объединить эти 2 подхода?

<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