使用@emotion/react css实现父hover控制子元素样式失败，是否不支持？

Emotion的css方法完全支持父元素hover时控制子元素样式，你的实现失效是因为写法有误，而非功能不支持。

问题根源 #

你之前的写法里，父元素和子元素的css样式是分开定义的，子元素样式中试图用硬编码的类名去匹配父元素，但Emotion的css方法会生成动态类名，硬写的类名和实际渲染的不匹配，导致hover规则无法生效。而styled语法是组件级封装，内部能自动识别自身和子组件的动态类名，所以嵌套选择器能正常工作。

正确实现方式 #

方案1：父子样式写在同一个css块中 #

通过嵌套选择器直接关联，让Emotion自动处理类名关联：

import { css } from '@emotion/react';

const parentWithChildStyles = css`
  position: relative;
  padding: 10px;
  border: 1px solid #ccc;

  /* 嵌套选择器，直接关联子元素 */
  &:hover > .child {
    display: block;
  }

  .child {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid #eee;
  }
`;

// 使用组件
<div css={parentWithChildStyles}>
  父元素
  <div className="child">子元素</div>
</div>

方案2：手动指定固定类名配合使用 #

给父、子元素指定固定类名，确保hover规则能精准匹配：

import { css, cx } from '@emotion/react';

// 定义固定类名
const PARENT_CLASS = 'parent-box';
const CHILD_CLASS = 'child-box';

const parentStyles = css`
  .${PARENT_CLASS} {
    position: relative;
    padding: 10px;
    border: 1px solid #ccc;
  }

  /* 通过固定类名关联hover规则 */
  .${PARENT_CLASS}:hover .${CHILD_CLASS} {
    display: block;
  }
`;

const childStyles = css`
  .${CHILD_CLASS} {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid #eee;
  }
`;

// 使用组件
<div className={cx(PARENT_CLASS, parentStyles)}>
  父元素
  <div className={cx(CHILD_CLASS, childStyles)}>子元素</div>
</div>

核心总结 #

• styled语法是组件化封装，天然支持嵌套选择器关联父子组件样式；
• css方法是独立样式块，必须通过同一块嵌套或固定类名关联的方式，才能让父hover规则正确作用于子元素；
• 避免硬写Emotion生成的动态类名，因为每次编译可能变化，无法保证匹配。

内容的提问来源于stack exchange，提问作者Patrick McCullough