css - className will be delete in emotion

Question

question desc:

1.My react component:

const Test = ({...other}) => {
    const defaultStyle = { '&.test-class-name': {fontSize: 20} }
    return <div className={'test-class-name'} css={{color: 'blue', ...defaultStyle}} {...other}>test</div>
  }

2.Then use this component: <Test css={{color: 'red'}} />.
3.dependencies:
"react": "^16.13.0",
"@emotion/core": "^10.0.28",

result:

i get:<div class="css-1w6qheq-Test"></div>. but i expect: <div class="test-class-name css-1w6qheq-Test"> . emotion will delete pre className, and also cause '&.test-class-name': {fontSize: 20} invalid.
i want control my component through className and support css property at the same time.
How to avoid delete className? Or how to use className and css property at the same time?

question from:https://stackoverflow.com/questions/65915685/classname-will-be-delete-in-emotion

Answer 1

You should move the other object to the first attribute of an element. If it is the last, it will replace every attribute.

const Test = ({...other}) => {
    const defaultStyle = { '&.test-class-name': {fontSize: 20} }
    return <div {...other} className={'test-class-name'} css={{color: 'blue', ...defaultStyle}} >test</div>
  }

And if you use CSS in this code: <Test css={{color: 'red'}} /> It will not accept property css. Because library emotion will make change it. you can change it to another name. For example: <Test style={{color: 'red'}} />

const Test = ({...other}) => {
    const defaultStyle = { '&.test-class-name': {fontSize: 20} }
    return <div {...other} className={'test-class-name'} css={{color: 'blue', ...defaultStyle, ...(other && other.style)}} >test</div>
  }