🧐[问题]在使用createStyles定义样式时，如何引用当前定义的样式？

[binwei]

🧐 问题描述

现在有如下定义，如果想在preview中使previewActions的属性变更要怎么实现？

💻 示例代码

export const useStyles = createStyles(({ token, css }, props: { width: number; height: number }) => {
  const commonCss = css`
    width: ${props.width}px;
    height: ${props.height}px;
    position: relative;
    overflow: hidden;
  `

  return {
    button: css`
      ${commonCss}
      cursor: pointer;
    `,
    preview: css`
      ${commonCss}
      padding: ${token.paddingXS}px;

      &::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all 0.3s;
      }

      &:hover {
        &::before {
          opacity: 1;
        }
        // 在这里我需要引用previewActions，使其opacity变更为1，如何引用？
        div {
          opacity: 1;
        }
      }
    `,
    previewActions: {
      zIndex: 1,
      position: 'absolute',
      opacity: 0
    }
  }
})

[YUQIAN]

试试这样看行不行：

export const useStyles = createStyles(({ token, css, cx }, props: { width: number; height: number }) => {
  const commonCss = css`
    width: ${props.width}px;
    height: ${props.height}px;
    position: relative;
    overflow: hidden;
  `

  const  previewActions = cx(
   css `
      zIndex: 1;
      position: absolute;
      opacity: 0;
  ` )  // 这个地方使用 cx 包裹一下

  return {
    button: css`
      ${commonCss}
      cursor: pointer;
    `,
    preview: css`
      ${commonCss}
      padding: ${token.paddingXS}px;

      &::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all 0.3s;
      }

      &:hover {
        &::before {
          opacity: 1;
        }
        // 在这里我需要引用previewActions，使其opacity变更为1，如何引用？
       .${previewActions} {
           opacity: 1;
        }

        div {
          opacity: 1;
        }
      }
    `,
    previewActions,
  }
})

[binwei]

@monoplasty 这个方法可行，具体修改后的代码是这样

export const useStyles = createStyles(({ token, css, cx }, props: { width: number; height: number }) => {
  const commonCss = css`
    width: ${props.width}px;
    height: ${props.height}px;
    position: relative;
    overflow: hidden;
  `
  // 这里直接构造出previewActions的className
  const previewActions = cx(css`
    zIndex: 1;
    position: absolute;
    opacity: 0;
  `)

  return {
    button: css`
      ${commonCss}
      cursor: pointer;
    `,
    preview: css`
      ${commonCss}
      padding: ${token.paddingXS}px;

      &::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all 0.3s;
      }

      &:hover {
        &::before {
          opacity: 1;
        }
        // 引用previewActions的className，使其opacity变更为1
        .${previewActions} {
          opacity: 1;
        }
      }
    `,
    previewActions
  }
})