Emotion 9 to 10 - how to pass external classes properly

This is maybe a question about design rather than a specific bug.

• emotion version: 10.0.6
• react version: 16.4.2

Relevant code:

Previous emotion 9 code:

let carousel = css`
.. some carousel styles
`;

let dots = css`
..some dots styles
`;

<div className={cx(carousel, className)}>
      <Slider dotsClass={dotsClassName || dots}>
        {children}
      </Slider>
</div>

className and dotsClassName are custom class names you can pass down to the component to customize it.

What you did:

Now with emotion 10 im not even sure how I would write this in a clean and concise way. I did get it to work with this:

let carousel =`
.. some carousel styles
`;

let dots = `
..some dots styles
`;

<ClassNames>
    {({ css, cx }) => (
      <div
        className={cx(
          css`${carousel};`,
          className,
        )}
      >
        <Slider
          dotsClass={dotsClassName || css`${dots};`}
        >
          {children}
        </Slider>
      </div>
    )}
  </ClassNames>

But this seems like a really cumbersome / hard to read with ClassNames (alot more jsx and harder to follow imo)

I know its probably not the best practice to be passing class names to components (anti pattern) but in this case Slider is a 3rd party component and the only way to customise its styles is to pass down a class name.

Suggested solution:

Not sure - maybe there is a better way to write the above that im missing from the docs.

[jooj123]

@acnebs can do that but im no longer using that dependancy - only installed @emotion/core as per docs Prefer not to use the legacy emotion lib

[acnebs]

Just import css and cx from ‘emotion’ instead of ‘@emotion/core’.

It returns the name of the class.