当Container2的preview子元素显示时，如何为相邻的Container1设置样式？

单纯靠原生CSS无法直接实现这个需求。

原因很直接：CSS选择器的作用方向是单向的——只能从父元素选子元素，或者从前面的兄弟元素选后面的兄弟元素，没有办法反向根据后面元素的子元素（比如Container2里的.preview）是否存在，去选中并修改前面的Container1样式。现有的兄弟选择器（+、~）只能选中当前元素之后的兄弟，没法往前追溯。

不过结合React的状态管理，我们可以轻松实现这个需求，核心思路是把preview状态提升到两个组件的共同父组件，让父组件根据状态直接控制Container1的样式：

具体实现步骤 #

• 在父组件（Element）中维护preview状态，将其传递给Container2用于控制预览元素的显示/隐藏
• 根据preview的状态，给Container1添加额外的样式类名
• 最后用CSS给这个额外类名编写对应的样式

修改后的代码示例 #

import { useState } from 'react';

const Element = () => {
  // 把状态提升到父组件，实现状态共享
  const [preview, setPreview] = useState(true);

  return (
    <div>
      {/* 根据preview状态动态添加样式类 */}
      <Container1 isHighlighted={preview} />
      <Container2 preview={preview} setPreview={setPreview} />
    </div>
  );
};

const Container1 = ({ isHighlighted }) => {
  // 合并基础类名和动态类名
  const containerClass = isHighlighted ? 'container-1 highlight' : 'container-1';
  return <div className={containerClass}></div>;
};

const Container2 = ({ preview, setPreview }) => {
  return (
    <div className="container-2">
      {preview ? <div className="preview"></div> : ''}
      {/* 可以加个按钮测试状态切换 */}
      <button onClick={() => setPreview(!preview)}>切换预览状态</button>
    </div>
  );
};

对应的CSS样式 #

.container-1 {
  /* Container1的基础样式 */
  padding: 10px;
  margin: 10px 0;
}

.container-1.highlight {
  /* preview显示时的额外样式 */
  background-color: #e8f4fd;
  border: 1px solid #2196f3;
}

这种方案完全符合React的状态管理逻辑，通过状态提升实现组件间的状态共享，比单纯依赖CSS更可靠，也更易维护。

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