Изменение стиля флажка в css

Question

У меня есть флажок, который требует разных пользовательских стилей для разных условий. Мне удалось настроить флажок с помощью следующих 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;
  }

мой код флажка реализован следующим образом

 <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>

в настоящее время цвет, который я назначил для этого флажка, синий , Мне нужно изменить его на красный при определенных условиях. Как я могу это сделать? Как вы можете видеть, мой идентификатор также Dynami c, поэтому его нельзя использовать в css.