删除antd select组件上的轮廓答案

【问题标题】：Remove outline on antd select component删除antd select组件上的轮廓
【发布时间】：2020-02-13 02:15:25
【问题描述】：

我正在使用 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;
      }
    }
`;

我希望删除蓝色轮廓。但我的造型似乎不起作用

【问题讨论】：

您为什么要这样做？ Ant 设计已经做出了很好的焦点风格，它对可访问性很重要。发帖前有看标记吗？看起来他们将其应用于 .ant-select-selection 和 .ant-select-selection:focus 并使用边框 + 框阴影...
@Dominic 我也尝试过覆盖.ant-select-selection 和.ant-select-selection:focus。它没有帮助。大纲还在

标签： reactjs styled-components antd

【解决方案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

【讨论】：

有效吗？我正在尝试一天，但它对我不起作用。您的代码和框代码不起作用。

【解决方案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>

【讨论】：

【解决方案3】：

我设法在一个困难的下拉输入中修复它：

.ant-select:hover .ant-select-selector {
      border-color: #a2a2a2 !important;
      box-shadow: none !important;
    }

【讨论】：

【解决方案4】：

这对我来说很好用：

.ant-select-selector {
  border-color: rgba(204, 204, 204, 0.5) !important;
  box-shadow: none !important;
}

border-color 会在它获得焦点时覆盖边框，而当它没有获得焦点时，如果您想在焦点集中时更改边框，请在 .ant-select-open 上应用样式

【讨论】：