如何在Emotion CSS中聚焦元素时访问其他类名修改样式？

直接在input:focus选择器里修改父元素root的样式是不可行的——因为CSS本身没有父选择器，Emotion作为CSS-in-JS方案也无法突破这个限制。不过有两种可靠的实现方式：

方案1：使用:focus-within伪类 #

:focus-within是CSS原生伪类，当容器内的任意元素获得焦点时，容器本身会匹配该伪类。我们可以直接在root的样式中利用它来实现需求：

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

export const styles = {
  root: css`
    border: 1px solid black;
    // 当内部元素聚焦时修改边框颜色
    &:focus-within {
      border-color: #2196f3;
    }
  `,
  input: css`
    // input的基础样式
    padding: 8px;
    border: none;
    outline: none;
    width: 100%;
  `,
};

组件结构保持原写法即可：

<div className={styles.root}>
  <input className={styles.input} />
</div>

方案2：通过JS监听焦点事件动态切换类名 #

如果需要兼容不支持:focus-within的旧浏览器，或者需要更灵活的状态控制，可以通过JavaScript监听焦点事件，动态给父元素添加/移除样式类：

首先定义聚焦状态的额外样式：

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

export const styles = {
  root: css`
    border: 1px solid black;
    transition: border-color 0.2s;
  `,
  rootFocused: css`
    border-color: #2196f3;
  `,
  input: css`
    padding: 8px;
    border: none;
    outline: none;
    width: 100%;
  `,
};

然后在组件中管理焦点状态：

import { useState } from 'react';
import { styles } from './your-styles-file';

function YourComponent() {
  const [isInputFocused, setIsInputFocused] = useState(false);

  return (
    <div className={`${styles.root} ${isInputFocused ? styles.rootFocused : ''}`}>
      <input
        className={styles.input}
        onFocus={() => setIsInputFocused(true)}
        onBlur={() => setIsInputFocused(false)}
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Samat Zhetibaev