使用Stitches Composition API实现跨元素hover样式失效问题排查

问题描述 #

尝试通过Stitches Composition API实现：鼠标悬停在一个元素上时修改另一个元素的背景色，但功能无法正常工作，代码逻辑看似无误，找不到问题所在。

相关代码 #

const Heading2 = styled("h2", {
  background: "red",

  "&:hover": {
    background: "green"
  }
});

const Heading1 = styled("h1", {
  background: "blue",
  "&:hover": {
    background: "green",

    [`& ${Heading2}`]: {
      background: "yellow"
    }
  }
});

Stitches官方示例语法 #

const Button = styled('button', {
  // 基础样式

  [`& ${Icon}`]: {
    marginLeft: '5px',
  },
});

问题原因 #

你写的选择器[& ${Heading2}]会编译成类似.heading1:hover .heading2的CSS规则，这个规则仅当Heading2是Heading1的子元素时才会生效。但实际DOM结构中两个标题是平级关系，所以选择器无法匹配到目标元素。

官方示例里的Button和Icon是父子嵌套关系，因此空格选择器能正常工作，和你的DOM结构场景不同。

解决方案 #

根据DOM结构选择对应选择器：

• 如果可以调整DOM结构：把Heading2嵌套到Heading1内部，原选择器即可生效。
• 如果保持平级结构：使用兄弟选择器：
  • 相邻兄弟选择器（匹配紧跟在Heading1后的Heading2）：

    const Heading1 = styled("h1", {
      background: "blue",
      "&:hover": {
        background: "green",
        [`& + ${Heading2}`]: {
          background: "yellow"
        }
      }
    });
    

  • 通用兄弟选择器（匹配Heading1之后所有同级的Heading2）：

    const Heading1 = styled("h1", {
      background: "blue",
      "&:hover": {
        background: "green",
        [`& ~ ${Heading2}`]: {
          background: "yellow"
        }
      }
    });
    

内容的提问来源于stack exchange，提问作者Jaya Krishna