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)}>

score 1 · Accepted Answer · answered Apr 28 '18 at 12:35

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(' ')}

answered Apr 28 '18 at 12:35

AndreasT

That's odd! I tried to use css(), and I console.log it and found it's something like this: ' backgroundColor: "#eed" '. Not sure what happened.... but this works. Thank you – Franva Apr 28 '18 at 15:16

1 Answers1