reactjs - 删除antd select组件上的轮廓

Question

我正在使用 antd NPM 包的 Select 组件。我想删除聚焦组件时出现的蓝色轮廓。我怎样才能删除它？

我尝试使用样式组件来设置组件样式。样式如下所示:

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-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
  border-color: #d9d9d9 !important;
  box-shadow: none !important;
}

我把它留给了悬停。
代码沙盒: https://codesandbox.io/s/cool-moon-ohznt