通过 react 状态联动或 css 选择器组合，可在 container2 的子元素 .preview 显示时，为紧邻其前的 container1 添加特定样式；纯 css 方案受限于无法向上选择父/兄弟元素，因此需借助 react 状态驱动类名控制。
通过 react 状态联动或 css 选择器组合，可在 container2 的子元素 .preview 显示时，为紧邻其前的 container1 添加特定样式；纯 css 方案受限于无法向上选择父/兄弟元素，因此需借助 react 状态驱动类名控制。
在 CSS 中，选择器只能向下（后代、子代）或向右（相邻兄弟 +、通用兄弟 ~），无法选择前一个兄弟元素（即不存在 prev + .container-1 这样的语法）。因此，仅靠 CSS 无法实现“当 .container-2 .preview 存在时，给它前面的 .container-1 加样式”这一需求。
✅ 正确且推荐的做法是：将 preview 状态提升至共同父组件（如 element），并将其作为 prop 或上下文传递给 Container1，使其能根据状态动态应用样式类：
const element = () => {
const [preview, setPreview] = useState(true); // 状态提升
return (
<div>
<container1 haspreview="{preview}"></container1><container2 ontogglepreview="{setPreview}"></container2>
</div>
);
};
const Container1 = ({ hasPreview }: { hasPreview: boolean }) => {
return (
<div classname="{`container-1" :>
{/* 内容 */}
</div>
);
};
const Container2 = ({ onTogglePreview }: { onTogglePreview: (show: boolean) => void }) => {
const [preview, setPreview] = useState(true);
useEffect(() => {
onTogglePreview(preview);
}, [preview, onTogglePreview]);
return (
<div classname="container-2">
{preview && <div classname="preview">Preview Content</div>}
</div>
);
};
对应 CSS 示例：
.container-1 {
padding: 16px;
border: 1px solid #ddd;
}
.container-1.preview-active {
background-color: #f0f9ff;
border-color: #3b82f6;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}
⚠️ 注意事项：
- ❌ 不要使用 className={preview ? "container-1 special" : "container-1"} 在 Container1 内部直接读取局部状态 —— 因为 Container1 无法感知 Container2 的内部状态变化；
- ✅ 状态必须提升到最近共同祖先，确保两个容器对同一状态源响应；
- ? 若使用 useEffect 同步子组件状态到父组件，请确保依赖项正确，避免无限循环；
- ? 替代方案：可使用 React.Context 或 Zustand 等状态管理库解耦，适合更复杂嵌套场景。
总结：该需求本质是跨组件的状态驱动样式，CSS 无解，必须由 React 控制类名。核心原则是——让样式决策发生在状态可知的位置，并通过 props 或 context 显式传递意图。
