Стиль Cechkbox не применяется, если установлен флажок

Question

Попробуйте создать несколько флажков, чтобы пользователь мог просматривать все параметры и выбирать тот, который он хочет. может быть один или несколько.

Итак, это выглядит так:

Итак, мой невыбранный вид выглядит нормально и работает. Невыделены все те, у которых есть +.

Проблема в том, что когда я выбираю один или несколько, я хотел бы, чтобы стиль был обратным, чтобы check и font были белыми, когда фон становится оранжевым.

Я пытаюсь использовать css :focus, :active ... ни один из них не работает, чтобы изменить цвет.

значок меняется из-за материала- ui fwk

здесь код:

import React from 'react';
import TextContents from '../../assets/translations/TextContents'
import './CreateClassOnBoardingForm.css';
import { waitForDomChange } from '@testing-library/react';
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import AddIcon from '@material-ui/icons/Add';
import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';

class ClassCreationFormStep11 extends React.Component {
    render() {

        const categoryList = [
            { value: 'CRAFT_AND_TRADE', name: 'Craft & Trades' },
            { value: 'CODE', name: 'Code' },
            { value: 'MECHANICAL', name: 'Mechanical'},     
            { value: 'SCIENCE', name: 'Science' }, 
            { value: 'BUSINESS', name: 'Business' },
            { value: 'CIVICS', name: 'Civics' },
            { value: 'COMMUNICATION', name: 'Communication' },
            { value: 'EXPLORATION', name: 'Exploration' },
            { value: 'FOOD', name: 'Food' },
            { value: 'CULTURE', name: 'Culture' },
            { value: 'PHILOSOPHY', name: 'Philosophy' },
            { value: 'WELLNESS', name: 'Wellness' },
            { value: 'PLAY', name: 'Play/Gaming' },
            { value: 'DANCE', name: 'Dance' },
            { value: 'MUSIC', name: 'Music' },
            { value: 'ART', name: 'Art' },
            { value: 'PHOTO', name: 'Photography' },
            { value: 'FILM', name: 'Film' },
            { value: 'DESIGN', name: 'Design' },
        ];

      if (this.props.currentStep !== 11) { // Prop: The current step
        return null
      }
      // The markup for the Step 1 UI
      return(
        <div className="form-class-cat-group">
          <label className="label-txt" htmlFor="typeOfClass">{TextContents.FormClassCategories}
                <FormControl component="fieldset">
                    <FormGroup aria-label="position" row>
                        {categoryList.map((e, key) =>  { 
                          return <FormControlLabel
                              value={e.value}
                              control={<Checkbox icon={<AddIcon />}
                                checkedIcon={<CheckCircleOutlineIcon />}
                                color="primary" />}
                              label={e.name}
                              labelPlacement="start"
                              className="check-box-village"/>                          
                      })}
                    </FormGroup>
                  </FormControl>
          </label>
        </div>
      )
    }
  }

  export default ClassCreationFormStep11

и css

.check-box-village {
  border-radius: 21px; 
  background-color: white; 
  border-color: #ff7255;
  border-style: solid;
  border-width: 2px;
  font-family: Source Sans Pro;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #ff7255;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 4px;
}

.check-box-village:checked {
  border-radius: 21px; 
  background-color: #ff7255; 
  border-color: #ff7255;
  border-style: solid;
  border-width: 2px;
  font-family: Source Sans Pro;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: white;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
}

Есть идеи, как применить css к проверке