Difficulty understanding the usage of `cx` between packages

Description:

I’ve just started migrating a project to emotion, and am struggling to understand the usage patterns of the cx function from @emotion/css, specifically around two areas.

1. Short circuiting values for conditional classNames: cx(state && className)

   There’s no mention of this in the documentation, only the object-based { [className]: state } method, but I see it is possible after testing it out. Is this considered a bad or deprecated pattern? I’m coming from another library which supports it, and prefer the approach.

2. Including SerializedStyles from @emotion/react’s css

   This doesn’t work in cx, and forces me to use css from @emotion/css instead, but leaves me wondering if I’m choosing the right method for adding extra classNames? It feels like the react package should be the best css function to use, since I’m styling a React component. I think I would prefer there to be a version of cx exported from /react, which supports combining SerializedStyles as well so that I can remove the /css package, if that’s possible.

Overall I feel like I’m juggling between three packages (/styled, /css, /react) a little too much, which often leaves me confused. Some extra documentation around these choices would be helpful.

Edit: in case it’s useful, I prefer the styled method over the css prop method.

Documentation links: https://emotion.sh/docs/@emotion/css#cx

[max8hine]

Same here, confusing on how to import cx method from @emotion/react instead of installing @emotion/css

[srmagura]

If you’re using @emotion/react or @emotion/styled, there is no need to install the @emotion/css package at all. The cx function from @emotion/css should only be used when generating class names with @emotion/css.

You can use the css function from @emotion/react to combine multiple object styles, CSS strings, SerializedStyles, .etc. The css function and css prop also support conditional styles like this:

const baseCss = css({ color: 'blue' })
const activeCss = css({ backgroundColor: 'gray' })

function MyComponent({ active }) {
    return <div css={[baseCss, active && activeCss]} />
}

The only context where cx is relevant when using @emotion/react or @emotion/styled is when using <ClassNames>, which is documented here.

I’m going to try to improve the documentation around combining CSS & conditional CSS using the css function since we don’t currently have a great example of it.