🧐[问题] css方案 不支持变量嵌套？

[KeithMo0425]

🐛 bug 描述

class变量 嵌套生成的css会合并成一个class

.button-wrapper {
  margin-top: 24px;

  ${buttonClass} {
    font-size: 20px;
  }
}

buttonClass 的 样式 会合并到 .button-wrapper里

💻 复现代码

const useStyles = createStyles(({ css }) => {
  const buttonClass = css`
    background-color: #3498db;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 12px 24px;

    &:hover {
      background-color: #2980b9;
    }
  `

  const containerClass = css`
    display: flex;
    flex-direction: column;
    align-items: center;

    .button-wrapper {
      margin-top: 24px;

      ${buttonClass} {
        font-size: 20px;
      }
    }
  `
  return {
    buttonClass,
    containerClass,
  }
})

function MyComponent() {
 const { styles } = useStyles()

  return (
    <div className={styles.containerClass}>
        <p>Some content here</p>
        <div className="button-wrapper">
          <button className={styles.buttonClass}>Click me</button>
        </div>
      </div>
  );
}

© 版本信息

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

[arvinxx]

Css方法默认不生成className，你需要这种级联的话，在需要classname的地方加个cx？

[KeithMo0425]

Css方法默认不生成className，你需要这种级联的话，在需要classname的地方加个cx？

感谢回复，现在已经是这么处理了