🐛[BUG] cx 方法把两个 className 合成一个新的了

[liuweiGL]

🐛 bug 描述

ImageCard.tsx

import { useRef } from 'react'

import { createStyles } from 'antd-style'

import ImageBox from './ImageBox'
import ImageResizer from './ImageResizer'
import { ImageCardProps } from './interface'

const useStyles = createStyles(({ cx, css, token }) => {
  const imageResizer = css({
    display: 'none'
  })

  return {
    imageCard: {
      position: 'relative',
      display: 'inline-block',
      lineHeight: 0,
      fontSize: 0,
      [`&:focus > .${cx(imageResizer)}`]: {
        display: 'block'
      }
    },
    imageResizer
  }
})

const ImageCard = ({
  /* -------------------------------------------------------------------------- */
  /*                               ImageBox Props                               */
  /* -------------------------------------------------------------------------- */
  ossId,
  filename
}: ImageCardProps) => {
  const cardRef = useRef<HTMLDivElement>(null)
  const boxRef = useRef<HTMLDivElement>(null)

  const { styles } = useStyles()

  return (
      <div ref={cardRef} className={styles.imageCard} tabIndex={-1}>
        <ImageResizer className={styles.imageResizer} imageRef={boxRef} />
        <ImageBox elRef={boxRef} filename={filename} ossId={ossId} />
      </div>
  )
}

export default ImageCard

ImageResizer.tsx

const useStyles = createStyles(({ token }) => ({
  imageResizerBox: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    zIndex: 1,
    pointerEvents: 'none',
    outline: `1px solid ${token.blue4}`
  }
}))

const ImageResizer = ({ className, style, imageRef }: ImageResizerProps) => {
  const { cx, styles } = useStyles()

  console.group('ImageResizer')
  console.log(`styles.imageResizerBox`, styles.imageResizerBox)
  console.log(`className`, className)
  console.log(
    `cx(styles.imageResizerBox, className)`,
    cx(styles.imageResizerBox, className)
  )
  console.groupEnd()
}

📷 复现步骤

🏞 期望结果

cx(styles.imageResizerBox, className) 应该返回 acss-1bsivun acss-1hyfx7x 而不是单个 acss-1e33oub

💻 复现代码

可复现 demo

© 版本信息

• antd-style 版本: [e.g. 3.4.4]
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[arvinxx]

cx 的合并逻辑是 emotion 的默认行为，这个似乎应该没法解决。

如果是为了解决稳定的 className 这个问题，可以考虑下这样？

const imageResizer = cx(css({
    display: 'none'
  }))

  return {
    imageCard: {
      position: 'relative',
      display: 'inline-block',
      lineHeight: 0,
      fontSize: 0,
      [`&:focus > .${imageResizer}`]: {
        display: 'block'
      }
    },
    imageResizer
  }