Удалить контур в компоненте выбора и вывода

Question

Я использую компонент Select пакета antd NPM. Я хочу удалить синий контур, который появляется, когда компонент находится в фокусе. Как я могу удалить его?

Я попытался стилизовать компонент, используя стилизованные компоненты. Стиль выглядит следующим образом:

const StyledSelect = styled(Select)`

    & .ant-select-selection__rendered {
        width: 200px;
        margin-left: 0;
        margin-right: 0;
        &:focus {
          outline: none;
          border: none;
        }
    }
    &.ant-select-focused {
      border: none;
      &:focus{
        outline: 0;
      }
    }
`;

Я ожидаю, что синий контур будет удален. Но мой стиль не работает

Answer 1

Я не уверен, почему вы хотите это сделать, но если вы наблюдаете CSS в вашем браузере, вы можете увидеть, что вам нужно переопределить.

.ant-select-focused .ant-select-selection,
.ant-select-selection:focus,
.ant-select-selection:active,
.ant-select-open .ant-select-selection {
  border-color: #d9d9d9;
  box-shadow: none;
}

Я оставил его для наведения.

коды и окна: https://codesandbox.io/s/cool-moon-ohznt