React+Sass自定义Toggle按钮对齐问题求助

问题核心 #

你用React结合Sass制作的Toggle按钮功能正常，但absolute定位的滑块（伪元素）与relative背景容器出现对齐错位。本质原因是滑块伪元素高度（25px）大于容器高度（20px），且未设置垂直居中规则，导致滑块上下溢出容器，视觉上错位。

对齐修复方案 #

修改Sass中toggle__button::before的样式，添加垂直居中定位，并调整滑块的初始与选中位置：

@import '../../sass/variables';

.toggle {
  position: relative;
  width: 45px;
  height: 20px;

  &__checkbox {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;

    &:checked+.toggle__button {
      background-color: $primary-color;

      &::before {
        transform: translate(16px, -50%);
        background-color: white;
      }
    }
  }

  &__button {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #646566;
    transition: 0.3s;
    border-radius: 30px;

    &::before {
      position: absolute;
      content: "";
      height: 25px;
      width: 25px;
      background-color: #B6B6B6;
      border-radius: 50%;
      transition: 0.3s;
      top: 50%;
      transform: translateY(-50%);
      left: 2px;
    }
  }
}

代码优化建议 #

1. 表单事件规范：checkbox状态变化用onChange替代onClick，更贴合表单元素交互逻辑；优先使用受控组件模式：

const [isToggled, setIsToggled] = useState(false);

<label className="toggle">
  <input
    type="checkbox"
    checked={isToggled}
    onChange={() => setIsToggled(!isToggled)}
    name="ToggleSwitch"
    className="toggle__checkbox"
    aria-label="功能切换开关"
  />
  <span className="toggle__button" />
</label>

2. 容器交互优化：给.toggle添加display: inline-block和cursor: pointer，方便与其他元素对齐，同时明确点击可交互：

.toggle {
  position: relative;
  width: 45px;
  height: 20px;
  display: inline-block;
  cursor: pointer;
}

3. 样式可维护性提升：将重复样式（如过渡时长、滑块边距）提取为Sass变量，方便统一修改：

$toggle-transition: 0.3s;
$toggle-slider-margin: 2px;

// 后续使用
transition: $toggle-transition;
left: $toggle-slider-margin;

4. 无障碍优化：添加aria-label属性，提升屏幕阅读器兼容性。

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