Emotion: Components with merged classnames

[llyys]

We have existing global css file, I would like to extend component that will inherit global style namings.

const RedButton = styled('div')`
  background: red;
`

This will generate component something like
<div class="css-ds90sf">

styled-components supports merge className

const StyledRedButton = styled.div.attrs({
  className: 'btn btn-mjau',
})`
  background: red;
`

Is there something like this available in emotion?

const MergedButton = styled('div', {className:'btn btn-mjau'})`
    background: red;
`

that would generate merged className <div class="btn btn-mjau css-div-234des"

Why I need this? Because we have existing customized bootstrap css, and I don't want to reimplement all styles. So for me would be perfect to mix both of these worlds.

[jnatherley]

@llyys

I might be mistaken but i think it does support it out of the box. However it the classNames need to be the className prop.

 const csx = classnames('btn', 'btn-mjau');

return(
<RedButton
  className={csx}
/>
);

Should return <div class="btn btn-mjau css-div-234des">

[jnatherley]

Also i found this:

https://github.com/emotion-js/emotion/blob/86b4a61d0db7446f9aab60ecd70d76b2453c9f26/docs/with-props.md

[tkh44]

@jnatherley emotion provides a utility for combining class names called cx

https://github.com/emotion-js/emotion/blob/master/docs/cx.md

Combines the actual content of emotion generated class names. Multiple emotion generated class names are input and a unique class name is output.

This is the most important aspect of using cx vs a third party classnames lib.

[NNSTH]

@tkh44 this link gives 404 page, I found the usage of cx here:
https://github.com/emotion-js/emotion/tree/master/packages/core