css - 如何使用 sass 制作 ant design 自定义主题？

Question

我想在用户将鼠标悬停在 ant design 库中时更改输入字段的边框颜色。当用户关注它们时，我通过以下方式更改了边框:

.ant-input:focus {
  border-color: #7363dc;
  outline: 0;
}

但不能对悬停做同样的事情

Answer 1

只需使用 :hover

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

.ant-input:hover {
    border-color: #7363dc;
    outline: 0;
}

input {
  max-width: 400px;
}
.ant-input:focus {
  border-color: red !important;
  outline: 0;
}

.ant-input:hover {
  border-color: green !important;
  outline: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.1/antd.css" rel="stylesheet"/>
<input class="ant-input" placeholder="Input field">

作为替代(可能更清洁)的解决方案，看起来 Ant Design UI 允许您通过定义的变量自定义主题。见:

https://ant.design/docs/react/customize-theme