Search code examples
reactjsemotion

Emotion: Using both a class and the "css" method in "className" prop

How can both a class plus additional CSS be applied when Emotion is used with the className prop in React?

For example, how can one add a class myClass to the following?

import {css} from 'emotion'

<div className={css`color: red`}>
Solution

  • I've never used Emotion but it looks like you can simply add your class and another template string around the css function.

    <div className={`myClass ${css`color: red`}`}>

    I tested this with one of their inline editors on a page in their Introduction then checked the markup. Seemed to work.