реагировать, если выбрано значение, сохранить цвет рамки фокуса

Question

В реакции выбора выберите, как сохранить цвет рамки фокуса, если выбрано значение?

Теперь у меня есть следующий конфиг

const selectCustomStylesCheckboxes = {
  control: (base, state) => ({
    ...base,
    boxShadow: state.isFocused ? 0 : 0,
    borderWidth: 2,
    minHeight: 50,
    borderColor: state.isFocused ? "#707070" : base.borderColor,
    "&:hover": {
      borderColor: state.isFocused ? "#707070" : base.borderColor
    }
  }),
  option: (provided, state) => ({
    ...provided,
    color: state.isSelected ? "#46b428" : "initial",
    //margin: "0 10px",
    fontWeight: "500",
    backgroundColor: state.isSelected ? "rgba(70, 180, 40, 0.18)" : "initial"
  }),
  menuPortal: base => ({ ...base, zIndex: 9999 })
};

но я не знаю, как отслеживать выбранное состояние

Answer 1

Я нашел способ управления своей проблемой с помощью компонента Control:

const Control = (props) => {
  const selected = props.hasValue ? "has-option" : "";
  return (
    <div className={selected}>
      <components.Control
        {...props}
        classNamePrefix={selected}
      ></components.Control>
    </div>
  );
};

, чем я настраиваюсь через CSS цвет границы

  .has-option {
      [class$="-control"] {
          border-color: $gray;
      }

      [class$="-IndicatorsContainer"] {
          svg {
              fill: $gray;
          }
      }
  }