React中如何根据toggleSwitch2状态控制styles.css部分样式生效？

问题背景 #

需求：仅当toggleSwitch2状态为true时，启用指定的.react-flow .react-flow__handle样式；状态为false时恢复默认样式。
难点：.react-flow__handle是React Flow库生成的内部DOM元素，无法直接在JSX中为它添加条件类名。

解决方案1：父容器条件类名控制（推荐） #

通过给React Flow的根容器添加动态类名，利用CSS后代选择器间接控制内部手柄的样式。

步骤1：修改React组件代码

找到渲染<ReactFlow>的容器，根据toggleSwitch2状态添加自定义类big-handles：

import React, { useState } from 'react';
import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';
import './styles.css';

const YourComponent = () => {
  const [toggleSwitch2, setToggleSwitch2] = useState(false);

  const handleToggleSwitch2 = () => {
    setToggleSwitch2(!toggleSwitch2);
  };

  return (
    <div>
      <div className="toggle-switch-container2">
        <input id="toggle-switch2" type="checkbox" checked={toggleSwitch2} onChange={handleToggleSwitch2} />
        <label htmlFor="toggle-switch2">
          Make handles bigger
        </label>
      </div>
      
      {/* 给React Flow容器添加条件类名 */}
      <div className={`react-flow-wrapper ${toggleSwitch2 ? 'big-handles' : ''}`}>
        <ReactFlow nodes={nodes} edges={edges} />
      </div>
    </div>
  );
};

export default YourComponent;

步骤2：更新CSS样式

在styles.css中，通过父类big-handles触发目标样式：

/* 默认状态（toggleSwitch2为false）：继承React Flow原生样式 */
.react-flow .react-flow__handle {
}

/* 开启开关时的样式 */
.big-handles .react-flow .react-flow__handle {
  width: 30px;
  height: 14px;
  border-radius: 3px;
  background-color: #784be8;
}

解决方案2：CSS变量动态切换 #

如果不想额外添加类名，可以用CSS变量配合行内样式实现动态切换：

步骤1：定义CSS变量

在styles.css中为手柄样式绑定变量：

.react-flow .react-flow__handle {
  width: var(--handle-width, inherit);
  height: var(--handle-height, inherit);
  border-radius: var(--handle-radius, inherit);
  background-color: var(--handle-bg, inherit);
}

步骤2：在组件中动态设置变量

给React Flow容器添加行内样式，根据toggleSwitch2状态修改变量值：

<div 
  className="react-flow-wrapper"
  style={{
    '--handle-width': toggleSwitch2 ? '30px' : 'inherit',
    '--handle-height': toggleSwitch2 ? '14px' : 'inherit',
    '--handle-radius': toggleSwitch2 ? '3px' : 'inherit',
    '--handle-bg': toggleSwitch2 ? '#784be8' : 'inherit'
  }}
>
  <ReactFlow nodes={nodes} edges={edges} />
</div>

内容的提问来源于stack exchange，提问作者Paweł Owczarek