Spreading className prop results in [object Object]

• emotion version: 10.0.4
• react version: 16.7.0-alpha.2

const linkCss = css`
  color: black;

  &.active-section {
    color: red;
  }
`

function setClass({ href, isPartiallyCurrent }) {
  if (isPartiallyCurrent && href !== '/') {
    return {
      className: `${linkCss} active-section`,
    }
  }

  return {
    className: linkCss,
  }
}

<Link getProps={setClass} />

I’m migrating from Emotion 9 to 10, on a Gatsby site. The above (simplified) code used to work:

<a class="css-RANDOMHASH>

// or, when applicable
<a class="css-RANDOMHASH active-section">

After the migration, css-RANDOMHASH is replaced by [object Object]. Does anyone know a fix?

Further information: This uses the getProps API from @reach/router. Source here.

[mnpenner]

import { css as cssClass } from 'emotion';

Doesn’t exist in emotion 10. What’s the proper way to do this now?

[TarVK]

import { css as cssClass } from 'emotion';

Doesn’t exist in emotion 10. What’s the proper way to do this now?

https://emotion.sh/docs/class-names seems like this is the solution now if you want to obtain a class name