🧐[问题] 样式怎么嵌套呢

[liuweiGL]

🧐 问题描述

const useStyles = createStyles(({ token }) => ({
  resizeHandleOuter: {
    position: 'relative',
    flex: 1,
    marginInline: token.paddingMD,
    backgroundColor: token.colorBgLayout,
    borderRadius: token.borderRadius,
    transition: 'background-color .2s linear',
    [`&[data-resize-handle-active]`]: {
      backgroundColor: token.colorFill
    }
  },
  icon: {
    position: 'absolute',
    width: '1em',
    height: '1em',
    left: 'calc(50% - 0.5rem)',
    top: 'calc(50% - 0.5rem)',
    color: token.colorTextQuaternary,
    fontSize: token.fontSize
  }
}))

我怎么实现 resizeHandleOuter active 时改变 icon 的样式:

  [`&[data-resize-handle-active]`]: {
      backgroundColor: token.colorFill,
      // 这里怎么写呢，还是只能单独用一个 className？
      [`& .icon`]: {
           color: 'red'
       }
    }

[arvinxx]

const useStyles = createStyles(({ token , css, cx }) => {
 // 1. 将样式单独抽一个变量
 const icon  =css({
    position: 'absolute',
    width: '1em',
    height: '1em',
    left: 'calc(50% - 0.5rem)',
    top: 'calc(50% - 0.5rem)',
    color: token.colorTextQuaternary,
    fontSize: token.fontSize
  });

 return {
  resizeHandleOuter: {
    position: 'relative',
    flex: 1,
    marginInline: token.paddingMD,
    backgroundColor: token.colorBgLayout,
    borderRadius: token.borderRadius,
    transition: 'background-color .2s linear',
    [`&[data-resize-handle-active]`]: {
      backgroundColor: token.colorFill,
      // 2. 用 cx 将 css`` 的 CSSObject 转换为 className
       [cx(icon)]:{color:'red'}
    }
  },
  icon
}
)