React复选框内部区域颜色无法修改问题求助

1. 补全React Checkbox组件代码 #

你的组件返回内容为空，需正确渲染复选框元素并绑定传入的属性：

import React from "react";

function Checkbox({ onClickProp, isCheckedProp, checkBoxDisableProp }) {
  return (
    <input
      type="checkbox"
      className="bigger-checkbox"
      onClick={onClickProp}
      checked={isCheckedProp}
      disabled={checkBoxDisableProp}
    />
  );
}
export default Checkbox;

2. 修改CSS样式（核心修复） #

原生复选框受浏览器默认样式限制，直接设置background-color无效，需先移除默认外观再自定义样式：

/* 自定义复选框基础样式 */
.bigger-checkbox {
  cursor: pointer;
  transform: scale(1.25);
  /* 移除浏览器默认样式，这是核心步骤 */
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #cea325;
  border-radius: 3px;
  background-color: #fff; /* 未选中时的背景色 */
  position: relative;
}

/* 选中状态的背景色 */
.bigger-checkbox:checked {
  background-color: #cea325;
}

/* 选中后添加对勾图标 */
.bigger-checkbox:checked::after {
  content: "✓";
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 禁用状态样式 */
.bigger-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  border-color: #ccc;
}

/* 禁用且选中的状态 */
.bigger-checkbox:disabled:checked {
  background-color: #ccc;
}

关键说明 #

• 必须通过appearance: none（兼容webkit内核需加-webkit-appearance: none）清除浏览器对复选框的默认样式，才能自定义背景色等外观。
• 利用:checked伪类控制选中状态的样式，::after伪元素可以自定义选中后的对勾样式，让视觉效果更符合需求。

内容的提问来源于stack exchange，提问作者sp-sathish