React表单中checkbox与label排版显示异常如何解决

现有样式的核心问题 #

• 选择器书写错误：初始样式中.form__container checkbox-label缺少类名前缀.，规则无法命中目标元素
• 全局input宽度规则污染：.form__container input统一设置width: 280px的规则会作用到复选框上，导致原生复选框控件被拉伸变形
• 标签布局规则错误：现有.checkbox-label被设置为display: block，强制元素独占一行，无法和复选框横向排列
• 缺少对齐基线设置：原生复选框默认和行内文本存在对齐偏移，没有统一对齐规则时必然出现错位

修复代码 #

直接在全局样式末尾追加以下CSS即可覆盖错误规则：

/* 排除复选框、单选框受全局input宽度设置影响 */
.form__container input:not([type="checkbox"]):not([type="radio"]) {
  width: 280px;
}

/* 复选框/单选框标签使用flex布局实现横向对齐 */
.form__container .checkbox-label,
.form__container .radio-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto;
  cursor: pointer;
  line-height: 1;
  margin: 6px 0;
}

/* 重置复选框/单选框自身样式，避免被全局规则干扰 */
.form__container input[type="checkbox"],
.form__container input[type="radio"] {
  width: auto !important;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
}

多复选框组排版补充 #

如果是多个复选框横向排列的场景，给包裹整组复选框的父容器追加以下样式，即可实现自动换行、间距统一：

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

注意：如果动态渲染的结构没有给复选框组加统一类名，直接给对应.form-group容器应用上面的组样式即可。

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