如果选择了值，则进行反应选择，保持焦点边框颜色

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

我找到了一种方法来管理控制组件问题：

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