Remove outline on antd select component

Question

I'm using antd NPM package's Select component. I want to remove the blue outline which appears when the component is focussed. How can I remove it ?

I have tried styling the component using styled components. The styling looks like follows:

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

I expect the blue outline to be removed. But my styling doesn't seem to be working

Answer 1

If you observe the CSS in your browser you can see what you need to override.

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

I left it for hover.

codesandbox: https://codesandbox.io/s/cool-moon-ohznt