删除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

Answer 2

一种简洁的方法是将 bordered 选项设置为 false，如下所示。更多选项和参考请访问https://ant.design/components/select/#components-select-demo-bordered

  <Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>