I am not able to change the color of my checkbox's innerArea

My checkbox is

`import React from "react";

function Checkbox({ onClickProp, isCheckedProp, checkBoxDisableProp }) { return ( ); } export default Checkbox;`

and CSS is

bigger-checkbox
{
  cursor: pointer;
  transform: scale(1.25);
  background-color: #cea325 !important;
  color: #61dafb;
}

input[type="checkbox"]
{
  background-color: #cea325 !important;
}

bigger-checkbox:disabled
{
  cursor: not-allowed;
  transform: scale(1.25);
}
 

and my webpage is

I just want to change the color