如何调整react-bootstrap中Switch组件的尺寸？

不用修改全局Bootstrap CSS，你可以通过自定义类名+局部样式覆盖的方式调整Switch尺寸，具体步骤如下：

1. 给Switch组件添加自定义类 #

修改组件代码，为Form.Check添加自定义类名：

import Form from 'react-bootstrap/Form';
import './SwitchExample.css'; // 引入自定义样式文件

function SwitchExample() {
  return (
    <Form>
      <Form.Check 
        type="switch"
        id="custom-switch"
        label="Check this switch"
        className="custom-switch-lg" // 添加自定义类
      />
    </Form>
  );
}

export default SwitchExample;

2. 编写自定义样式 #

在SwitchExample.css中添加以下样式，可根据需求调整数值：

/* 调整开关整体尺寸 */
.custom-switch-lg .form-check-input {
  width: 3.5rem;
  height: 1.75rem;
}

/* 调整滑块大小与位置 */
.custom-switch-lg .form-check-input:checked {
  background-position: right center;
  background-size: 1.25rem 1.25rem;
}

/* 保持聚焦状态样式匹配新尺寸 */
.custom-switch-lg .form-check-input:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

原理说明 #

React-Bootstrap的Switch组件基于Bootstrap的.form-check-switch结构实现，通过给父元素添加自定义类，可精准覆盖该组件的局部样式，不会影响全局其他Switch组件。你可以按需修改width、height等数值，实现不同大小的开关效果。

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