企业级React开关组件主题定制指南：从场景化设计到深度实现

2026-03-30 11:46:02作者：郦嵘贵Just

引言：破解开关组件定制的三大痛点

在现代React应用开发中，开关组件作为用户交互的基础元素，其视觉表现与交互体验直接影响产品质感。然而开发团队在实际工作中常面临三个核心挑战：设计系统不匹配导致的风格冲突、复杂状态下的视觉一致性难以维护、以及定制化实现与性能优化之间的平衡。本文将通过"基础认知→场景化设计→深度定制→行业方案"的四阶结构，系统讲解如何基于react-switch组件打造符合企业级应用需求的主题定制方案，帮助开发者在保持代码可维护性的同时，实现视觉与交互的完美统一。

一、基础认知：react-switch主题定制核心概念

1.1 组件架构解析

开关组件（Toggle Switch Component）：一种二元状态切换控件，通过滑动或点击操作在开启/关闭状态间切换，广泛应用于功能开关、模式切换等场景。

react-switch采用组合式架构设计，主要由三个核心部分构成：

背景轨道（Background Track）：承载开关状态的基础容器
操作手柄（Handle）：用户交互的主要元素，随状态变化移动
状态指示器（State Indicator）：可选元素，通过图标或文本强化状态表达

这种分离式设计为主题定制提供了天然的灵活性，允许开发者独立定制各个组成部分的视觉表现。

1.2 核心定制属性体系

react-switch提供了完整的属性体系，支持从基础到高级的全方位定制：

属性类别	核心属性	默认值	取值范围	作用描述
颜色系统	onColor	"#008489"	十六进制/RGB/RGBA	开启状态背景色
	offColor	"#cccccc"	十六进制/RGB/RGBA	关闭状态背景色
	onHandleColor	"#ffffff"	十六进制/RGB/RGBA	开启状态手柄颜色
	offHandleColor	"#ffffff"	十六进制/RGB/RGBA	关闭状态手柄颜色
尺寸系统	height	28px	8px~100px	开关整体高度
	width	56px	16px~200px	开关整体宽度
	handleDiameter	height-2	6px~98px	手柄直径
形态控制	borderRadius	height/2	0~height/2	边框圆角半径
	boxShadow	"0 0 2px 0 rgba(0, 0, 0, 0.6)"	CSS box-shadow值	常态阴影效果
	activeBoxShadow	"0 0 5px 0 rgba(0, 0, 0, 0.6)"	CSS box-shadow值	激活状态阴影效果

提示：所有尺寸属性支持数字（像素）或字符串（如"2rem"、"30%"）类型，推荐使用数字类型以确保跨设备一致性。

1.3 环境准备与基础配置

安装方式：

npm install react-switch
# 或
yarn add react-switch

基础使用示例：

import React, { useState } from 'react';
import Switch from 'react-switch';

const BasicSwitch = () => {
  const [checked, setChecked] = useState(false);
  
  const handleChange = (checked) => {
    setChecked(checked);
    // 状态变化处理逻辑
  };
  
  return (
    <div style={{ margin: '20px' }}>
      <label>
        <span>功能开关</span>
        <Switch
          checked={checked}
          onChange={handleChange}
          onColor="#4CAF50"
          offColor="#f44336"
          height={30}
          width={60}
        />
      </label>
    </div>
  );
};

export default BasicSwitch;

实战检验：尝试修改上述代码中的height和width属性，观察开关组件的形态变化，思考为什么width通常设置为height的2倍左右能获得最佳视觉效果？

二、场景化设计：针对不同业务场景的定制方案

2.1 管理系统场景：高辨识度状态指示

场景特点：在数据密集型管理系统中，开关状态需要具有高度辨识度，同时保持界面简洁专业。

实现方案：

import React, { useState } from 'react';
import Switch from 'react-switch';

const AdminSystemSwitch = () => {
  const [checked, setChecked] = useState(false);
  
  return (
    <Switch
      checked={checked}
      onChange={setChecked}
      // 高对比度颜色方案
      onColor="#2196F3"
      offColor="#f5f5f5"
      onHandleColor="#ffffff"
      offHandleColor="#757575"
      
      // 适中尺寸，确保触控友好
      height={24}
      width={48}
      handleDiameter={20}
      
      // 清晰的状态指示
      checkedIcon={
        <span style={{ fontSize: 12, color: '#2196F3', margin: '0 auto' }}>
          ON
        </span>
      }
      uncheckedIcon={
        <span style={{ fontSize: 12, color: '#757575', margin: '0 auto' }}>
          OFF
        </span>
      }
      
      // 增强交互反馈
      boxShadow="inset 0 0 0 1px #ddd"
      activeBoxShadow="0 0 0 2px rgba(33, 150, 243, 0.3)"
    />
  );
};

export default AdminSystemSwitch;

实现原理：通过高对比度的颜色方案和明确的文本指示（ON/OFF）提升状态辨识度；适度的尺寸设计确保在数据表格等密集布局中依然保持良好的触控体验；精细的阴影效果增强界面层次感。

注意：在管理系统中，开关组件通常与表格或表单配合使用，建议将开关尺寸控制在24-30px高度范围内，以保持与其他表单元素的视觉协调。

实战检验：基于上述代码，实现一个具有"禁用状态"的管理系统开关，要求禁用状态下透明度降低至50%，并添加"禁止点击"的鼠标样式。

2.2 移动应用场景：触控优化与视觉反馈

场景特点：移动设备上的开关需要更大的触控区域和更明显的状态变化反馈，以适应触摸操作的精度要求。

实现方案：

import React, { useState } from 'react';
import Switch from 'react-switch';
import { View } from 'react-native'; // 如使用React Native

const MobileSwitch = () => {
  const [checked, setChecked] = useState(false);
  
  return (
    <View style={{ padding: 16 }}>
      <Switch
        checked={checked}
        onChange={setChecked}
        
        // 增大触控区域
        height={40}
        width={72}
        handleDiameter={36}
        
        // 鲜明的颜色对比
        onColor="#4CD964"
        offColor="#E5E7EB"
        onHandleColor="#ffffff"
        offHandleColor="#ffffff"
        
        // 增强阴影与过渡效果
        boxShadow="0 2px 5px rgba(0,0,0,0.1)"
        activeBoxShadow="0 4px 8px rgba(76, 217, 100, 0.3)"
        
        // 优化过渡动画
        transitionDuration={300}
      />
    </View>
  );
};

export default MobileSwitch;

实现原理：通过增大整体尺寸和手柄直径（40px高度）确保足够的触控区域；使用鲜明的绿色（开启）和浅灰色（关闭）形成强烈对比；增强阴影效果和延长过渡时间（300ms），使状态变化更加明显可感知。

警告：移动场景下，开关组件的最小触控区域应不小于44×44px（苹果Human Interface Guidelines标准），如实际视觉尺寸较小，可通过添加透明边框扩大点击区域。

实战检验：为上述移动开关添加"拖拽"交互效果的视觉反馈，当用户拖拽手柄时，背景颜色随拖拽位置逐渐变化，实现更自然的过渡效果。

2.3 金融系统场景：安全状态强化

场景特点：金融类应用中的开关通常用于安全设置或交易确认，需要传递"安全"、"可靠"的视觉感受，同时状态变化需谨慎明确。

实现方案：

import React, { useState } from 'react';
import Switch from 'react-switch';
import { FiLock, FiUnlock } from 'react-icons/fi';

const FinancialSwitch = () => {
  const [checked, setChecked] = useState(false);
  
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <span style={{ fontSize: 14, color: '#333' }}>交易密码验证</span>
      <Switch
        checked={checked}
        onChange={setChecked}
        
        // 稳重的颜色方案
        onColor="#1E88E5"
        offColor="#F5F7FA"
        onHandleColor="#FFFFFF"
        offHandleColor="#FFFFFF"
        
        // 适中的尺寸与圆角
        height={28}
        width={52}
        handleDiameter={24}
        borderRadius={14}
        
        // 安全相关图标
        checkedIcon={
          <FiUnlock style={{ color: '#1E88E5', size: 16 }} />
        }
        uncheckedIcon={
          <FiLock style={{ color: '#90A4AE', size: 16 }} />
        }
        
        // 精细的阴影效果
        boxShadow="0 1px 3px rgba(0,0,0,0.12)"
        activeBoxShadow="0 2px 6px rgba(30, 136, 229, 0.2)"
      />
    </div>
  );
};

export default FinancialSwitch;

实现原理：采用蓝色系（代表信任与安全）作为主色调；使用锁和解锁图标直观表达安全状态；圆角设计（14px）传递柔和可靠的视觉感受；适度的阴影效果增强界面层次感但不过度张扬。

提示：金融场景中的开关状态变化建议添加二次确认机制，特别是涉及资金安全的设置项，可在onChange回调中实现确认对话框。

实战检验：基于上述代码，实现一个具有"警告状态"的金融开关，当开启高风险功能时，开关呈现橙色系配色并显示警告图标。

三、深度定制：从样式到行为的全面掌控

3.1 自定义CSS类与样式覆盖

核心概念：react-switch提供了两个主要CSS类名，允许通过CSS选择器深度定制组件样式。

实现方案：

// SwitchWithCustomCSS.jsx
import React, { useState } from 'react';
import Switch from 'react-switch';
import './custom-switch.css';

const SwitchWithCustomCSS = () => {
  const [checked, setChecked] = useState(false);
  
  return (
    <Switch
      checked={checked}
      onChange={setChecked}
      className="custom-switch"
      onColor="#000000" // 基础颜色仍需通过属性设置
      offColor="#000000"
      height={36}
      width={72}
      handleDiameter={32}
    />
  );
};

export default SwitchWithCustomCSS;

/* custom-switch.css */
/* 背景轨道样式定制 */
.custom-switch .react-switch-bg {
  border: 2px solid #000000;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 手柄样式定制 */
.custom-switch .react-switch-handle {
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 开启状态样式 */
.custom-switch.react-switch-checked .react-switch-bg {
  background-color: #4CAF50 !important;
}

/* 关闭状态样式 */
.custom-switch:not(.react-switch-checked) .react-switch-bg {
  background-color: #f44336 !important;
}

/* 禁用状态样式 */
.custom-switch .react-switch-bg:disabled {
  opacity: 0.5;
  border-style: dashed;
}

实现原理：通过组合使用组件属性和CSS类选择器，实现基础属性难以达成的复杂样式效果。利用CSS的优先级规则，使用!important覆盖默认内联样式；通过自定义过渡函数（如cubic-bezier）实现更自然的动画效果。

警告：过度使用!important可能导致样式冲突和维护困难，建议优先使用更具体的选择器（如组合类名）来提高样式优先级。

实战检验：使用CSS实现一个"扁平风格"的开关组件，要求去除所有阴影效果，使用纯色填充和细边框，状态切换时添加轻微的缩放动画。

3.2 图标系统集成与状态表达

核心概念：通过checkedIcon/uncheckedIcon属性，将图标系统与开关状态关联，增强视觉传达效果。

实现方案：

import React, { useState } from 'react';
import Switch from 'react-switch';
import { 
  FiSun, FiMoon, 
  FiWifi, FiWifiOff,
  FiVolume2, FiVolumeX
} from 'react-icons/fi';

// 图标映射配置
const ICON_CONFIGS = {
  theme: {
    checked: <FiSun style={{ color: '#FFD700', size: 18 }} />,
    unchecked: <FiMoon style={{ color: '#4A6FA5', size: 18 }} />,
    onColor: '#1a237e',
    offColor: '#f5f5f5'
  },
  network: {
    checked: <FiWifi style={{ color: '#4CAF50', size: 18 }} />,
    unchecked: <FiWifiOff style={{ color: '#f44336', size: 18 }} />,
    onColor: '#e8f5e9',
    offColor: '#ffebee'
  },
  sound: {
    checked: <FiVolume2 style={{ color: '#2196F3', size: 18 }} />,
    unchecked: <FiVolumeX style={{ color: '#9E9E9E', size: 18 }} />,
    onColor: '#e3f2fd',
    offColor: '#f5f5f5'
  }
};

const IconSwitch = ({ type = 'theme' }) => {
  const [checked, setChecked] = useState(false);
  const config = ICON_CONFIGS[type];
  
  return (
    <Switch
      checked={checked}
      onChange={setChecked}
      checkedIcon={config.checked}
      uncheckedIcon={config.unchecked}
      onColor={config.onColor}
      offColor={config.offColor}
      onHandleColor="#ffffff"
      offHandleColor="#ffffff"
      height={36}
      width={64}
      handleDiameter={30}
      boxShadow="0 2px 5px rgba(0,0,0,0.1)"
    />
  );
};

// 使用示例
const IconSwitchDemo = () => (
  <div style={{ display: 'flex', gap: 20, padding: 20 }}>
    <IconSwitch type="theme" />
    <IconSwitch type="network" />
    <IconSwitch type="sound" />
  </div>
);

export default IconSwitchDemo;

实现原理：通过配置化方式定义不同类型开关的图标和颜色方案，实现组件复用；利用react-icons库提供的矢量图标，确保在不同尺寸下的清晰度；通过背景色与图标颜色的对比，增强状态辨识度。

提示：图标尺寸建议控制在手柄直径的50%-60%之间，既能保证图标清晰可见，又不会显得过于拥挤。

实战检验：扩展上述代码，实现一个"自定义图标"功能，允许用户通过props传入自定义图标组件，同时支持图标大小和颜色的动态调整。

3.3 动画与过渡效果定制

核心概念：通过控制过渡属性和动画函数，定制开关状态变化的动态效果，提升用户体验。

实现方案：

import React, { useState, useRef, useEffect } from 'react';
import Switch from 'react-switch';

const AnimatedSwitch = () => {
  const [checked, setChecked] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const switchRef = useRef(null);
  
  // 自定义过渡效果
  const transitionStyles = {
    transition: isDragging 
      ? 'transform 0.1s ease-out' 
      : 'background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
  };
  
  // 拖拽状态监听
  useEffect(() => {
    const switchElement = switchRef.current;
    if (!switchElement) return;
    
    const handleMouseDown = () => setIsDragging(true);
    const handleMouseUp = () => setIsDragging(false);
    const handleMouseLeave = () => setIsDragging(false);
    
    switchElement.addEventListener('mousedown', handleMouseDown);
    switchElement.addEventListener('mouseup', handleMouseUp);
    switchElement.addEventListener('mouseleave', handleMouseLeave);
    
    return () => {
      switchElement.removeEventListener('mousedown', handleMouseDown);
      switchElement.removeEventListener('mouseup', handleMouseUp);
      switchElement.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, []);
  
  return (
    <Switch
      ref={switchRef}
      checked={checked}
      onChange={setChecked}
      onColor="#6200EE"
      offColor="#f5f5f5"
      onHandleColor="#BB86FC"
      offHandleColor="#ffffff"
      height={32}
      width={60}
      handleDiameter={28}
      borderRadius={16}
      style={transitionStyles}
      
      // 自定义手柄动画
      handleStyle={{
        transition: isDragging 
          ? 'transform 0.08s ease-out' 
          : 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        boxShadow: isDragging 
          ? '0 4px 8px rgba(98, 0, 238, 0.4)' 
          : '0 2px 4px rgba(0, 0, 0, 0.2)'
      }}
    />
  );
};

export default AnimatedSwitch;

实现原理：通过监听鼠标事件区分"点击切换"和"拖拽切换"两种交互模式，为不同模式应用差异化的过渡效果；使用贝塞尔曲线（cubic-bezier）定制自然的动画节奏；拖拽过程中加快响应速度，提升交互流畅感。

注意：动画时长建议控制在200-300ms之间，过短会显得突兀，过长则会让用户感觉延迟。

实战检验：基于上述代码，实现一个"弹性效果"的开关动画，当手柄到达终点位置时添加轻微的回弹效果，增强物理真实感。

四、行业方案：设计语言适配与最佳实践

4.1 设计语言适配策略

不同的设计系统对开关组件有不同的规范要求，以下是几种主流设计语言的适配方案：

Material Design适配

const MaterialDesignSwitch = ({ checked, onChange }) => (
  <Switch
    checked={checked}
    onChange={onChange}
    onColor="#2196F3"
    offColor="#f5f5f5"
    onHandleColor="#ffffff"
    offHandleColor="#ffffff"
    height={30}
    width={50}
    handleDiameter={26}
    boxShadow="0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)"
    activeBoxShadow="0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)"
    transitionDuration={200}
  />
);

Ant Design适配

const AntDesignSwitch = ({ checked, onChange }) => (
  <Switch
    checked={checked}
    onChange={onChange}
    onColor="#1890ff"
    offColor="#e8e8e8"
    onHandleColor="#ffffff"
    offHandleColor="#ffffff"
    height={22}
    width={44}
    handleDiameter={18}
    borderRadius={11}
    boxShadow="inset 0 0 0 1px rgba(0,0,0,0.2)"
    activeBoxShadow="0 0 0 2px rgba(24, 144, 255, 0.2)"
  />
);

iOS风格适配

const iOSSwitch = ({ checked, onChange }) => (
  <Switch
    checked={checked}
    onChange={onChange}
    onColor="#4CD964"
    offColor="#e5e5ea"
    onHandleColor="#ffffff"
    offHandleColor="#ffffff"
    height={31}
    width={51}
    handleDiameter={27}
    borderRadius={15.5}
    boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"
    activeBoxShadow="inset 0 0 0 1px #4CD964"
  />
);

适配策略分析：

Material Design：注重阴影层次和过渡动画，尺寸适中，圆角为高度的50%
Ant Design：简洁扁平，注重边框细节，尺寸偏小，适合密集布局
iOS风格：圆润造型，柔和过渡，注重拟物化细节

提示：在大型项目中，建议创建一个主题适配层，根据项目采用的设计系统统一管理开关组件的样式配置，确保跨项目的一致性。

实战检验：分析你正在使用的设计系统，总结其开关组件的设计规范，基于react-switch实现一套符合该规范的主题配置。

4.2 性能优化策略

定制化可能带来性能开销，以下是几种关键优化策略：

避免不必要的重渲染

// 优化前：每次渲染创建新对象导致不必要重渲染
<Switch
  checked={checked}
  onChange={handleChange}
  // 问题：每次渲染都会创建新的对象
  style={{ margin: '10px' }}
  checkedIcon={<SunIcon />}
/>

// 优化后：使用memo和useCallback减少重渲染
import { useCallback, useMemo } from 'react';

const SunIcon = useMemo(() => <SunIcon />, []);
const handleChange = useCallback((checked) => {
  setChecked(checked);
  // 业务逻辑
}, []);

<Switch
  checked={checked}
  onChange={handleChange}
  style={useMemo(() => ({ margin: '10px' }), [])}
  checkedIcon={SunIcon}
/>

虚拟列表中的性能优化

import { memo } from 'react';

// 使用memo包装开关组件，避免列表滚动时的不必要重渲染
const MemoizedSwitch = memo(({ checked, onChange, id }) => (
  <Switch
    key={id}
    checked={checked}
    onChange={(checked) => onChange(id, checked)}
    onColor="#4CAF50"
    offColor="#f44336"
    height={24}
    width={48}
  />
));

// 在虚拟列表中使用
const SwitchList = ({ items }) => (
  <VirtualList
    data={items}
    height={500}
    rowHeight={40}
    rowRenderer={({ item }) => (
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <span>{item.name}</span>
        <MemoizedSwitch
          checked={item.enabled}
          onChange={(id, checked) => handleToggle(id, checked)}
          id={item.id}
        />
      </div>
    )}
  />
);

性能优化要点：

使用React.memo包装开关组件，避免父组件渲染时的连带重渲染
使用useCallback缓存事件处理函数，避免创建新函数引用
使用useMemo缓存静态样式和图标元素
对于列表中的大量开关，考虑虚拟滚动或懒加载

警告：过度优化可能导致代码复杂度增加，建议先通过React DevTools Profiler识别性能瓶颈，再有针对性地进行优化。

实战检验：创建一个包含1000个开关组件的列表，使用React DevTools分析渲染性能，应用上述优化策略并对比优化前后的渲染时间和帧率变化。

4.3 主题迁移指南

从其他开关组件迁移到react-switch的步骤和注意事项：

从原生HTML checkbox迁移

// 原生checkbox实现
<input 
  type="checkbox" 
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
  className="custom-checkbox"
/>

// 迁移到react-switch
<Switch
  checked={checked}
  onChange={setChecked}
  onColor="#4CAF50"
  offColor="#f44336"
  height={24}
  width={48}
/>

// 对应CSS迁移
/* 原生checkbox样式 */
.custom-checkbox {
  width: 20px;
  height: 20px;
  accent-color: #4CAF50;
}

/* 迁移为react-switch的CSS定制 */
.react-switch-bg {
  /* 背景样式 */
}
.react-switch-handle {
  /* 手柄样式 */
}

从其他UI库迁移（以Material-UI为例）

// Material-UI Switch
<Switch
  checked={checked}
  onChange={handleChange}
  color="primary"
  size="small"
/>

// 迁移到react-switch
<Switch
  checked={checked}
  onChange={handleChange}
  onColor="#1976d2" // Material-UI primary color
  offColor="#f5f5f5"
  height={20} // 对应size="small"
  width={36}
  handleDiameter={16}
/>

迁移注意事项：

颜色系统映射：将原组件的颜色属性映射到react-switch的onColor/offColor等属性
尺寸调整：根据原组件尺寸调整height/width/handleDiameter属性
事件处理：react-switch的onChange直接返回checked状态，无需从event.target获取
样式迁移：将原CSS样式分解为react-switch支持的属性和自定义CSS类

提示：迁移过程中建议逐步替换，先在非关键路径使用react-switch，验证功能和样式一致性后再全面推广。

实战检验：选择一个你熟悉的UI库中的开关组件，将其样式和功能迁移到react-switch实现，对比两者在渲染效果、交互体验和性能方面的差异。

五、设计决策指南：选择适合的定制方案

5.1 定制方案决策树

根据项目需求选择合适的定制方案：

基础样式调整
- 适用场景：简单的颜色、尺寸调整
- 实现方式：直接使用组件属性
- 优点：简单快捷，零额外代码
- 局限性：无法实现复杂样式效果
图标与状态增强
- 适用场景：需要直观状态指示的场景
- 实现方式：使用checkedIcon/uncheckedIcon属性
- 优点：提升可用性，增强视觉传达
- 注意事项：控制图标复杂度，确保不同状态下的辨识度
CSS深度定制
- 适用场景：特殊视觉风格需求
- 实现方式：自定义CSS类和样式覆盖
- 优点：高度定制化，实现复杂视觉效果
- 风险：可能受组件内部结构变化影响
完全自定义实现
- 适用场景：组件属性和CSS定制无法满足需求
- 实现方式：基于react-switch核心逻辑二次开发
- 优点：完全掌控组件行为和样式
- 代价：维护成本高，需跟踪上游更新

5.2 常见陷阱与规避方法

问题场景	解决方案
颜色对比度不足	使用WCAG对比度检查工具，确保文本与背景对比度不低于4.5:1
触控区域过小	设置height不小于24px，或通过padding扩大点击区域
动画过度复杂	限制同时动画的属性数量，避免使用昂贵的CSS属性（如box-shadow）
状态反馈不足	确保开关状态变化有明确的视觉反馈，如颜色、位置、图标变化
响应式适配问题	使用相对单位（rem/em）或媒体查询调整不同屏幕尺寸下的开关大小

5.3 可复用主题配置模板

企业级主题模板：

// themes/enterprise-switch.js
export const enterpriseTheme = {
  // 基础尺寸配置
  base: {
    height: 28,
    width: 56,
    handleDiameter: 24,
    borderRadius: 14
  },
  
  // 状态颜色配置
  colors: {
    primary: {
      onColor: '#0066CC',
      offColor: '#E6E6E6',
      onHandleColor: '#FFFFFF',
      offHandleColor: '#FFFFFF'
    },
    success: {
      onColor: '#008000',
      offColor: '#E6E6E6',
      onHandleColor: '#FFFFFF',
      offHandleColor: '#FFFFFF'
    },
    warning: {
      onColor: '#FFA500',
      offColor: '#E6E6E6',
      onHandleColor: '#FFFFFF',
      offHandleColor: '#FFFFFF'
    },
    danger: {
      onColor: '#FF0000',
      offColor: '#E6E6E6',
      onHandleColor: '#FFFFFF',
      offHandleColor: '#FFFFFF'
    }
  },
  
  // 阴影效果配置
  shadows: {
    default: '0 1px 3px rgba(0,0,0,0.12)',
    active: '0 2px 6px rgba(0,0,0,0.15)'
  },
  
  // 动画配置
  animation: {
    duration: 250,
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)'
  }
};

// 使用模板的组件
import { enterpriseTheme } from './themes/enterprise-switch';

const ThemedSwitch = ({ variant = 'primary', checked, onChange }) => {
  const config = enterpriseTheme.colors[variant];
  
  return (
    <Switch
      checked={checked}
      onChange={onChange}
      {...enterpriseTheme.base}
      {...config}
      boxShadow={enterpriseTheme.shadows.default}
      activeBoxShadow={enterpriseTheme.shadows.active}
      transitionDuration={enterpriseTheme.animation.duration}
    />
  );
};