Changing checkbox styling in css

I have a checkbox that needs different custom styling to different conditions. I was able to customise the check box using following css

.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0.1rem !important;
    left: -2rem !important;
    width: 2rem !important;
    height: 2rem !important;
    overflow: hidden;
    border: none;
    background-color: $buttonBack;
}

.custom-control-lg .custom-control-label {
    margin-left: 0.5rem !important;
    font-size: 1rem !important;
    line-height: 2rem;
    padding-left: 10px;
    font-size: 14px !important;

}

.custom-control-label:before{
    background: rgba(24, 68, 119, 0.2) !important;
    border: none !important;
    box-shadow: none !important;
  }
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background-color:$evcCardLightBlue !important;
    box-shadow: none !important;
  }

my checkbox code is implemented like follows

 <div class="custom-control custom-checkbox my-1 pl-0">
   <input type="checkbox" name="vehicle2"
     checked={stationIdArray.length !== 0 && groupIdArray && groupIdArray.some(e => e.groupIdz.groupId === groupId)}
     onClick={() => this.addEvcGroupToArray(item.stations.map((item, key) => {
      return (item.stationID)
     }), groupId)}
     className="custom-control-input"
     id={`'group'${item.groupId}`} />
     <label className="custom-control-label"
      for={`'group'${item.groupId}`}></label>
</div>

currently the color i have given for this check box is blue. I need to change it to red on certain conditions. How can i do this? As you can see my id is also dynamic so cannot be used in css.