Antd:修改自动完成输入框样式

在Ant Design（Antd）中，要修改自动完成输入框的样式，你可以使用style属性直接在组件上设置CSS样式，或者使用className来应用CSS类。另外，你也可以通过覆盖Antd的样式变量来实现样式定制。

以下是一个使用className来修改自动完成输入框样式的例子：

import React from 'react';
import { AutoComplete } from 'antd';
import './auto-complete-style.css'; // 假设你的自定义样式保存在这个文件中
 
const options = [
  { value: 'Burns Bay Road' },
  // ... 其他选项
];
 
const AutoCompleteWithCustomStyle = () => (
  <AutoComplete
    options={options}
    className="custom-auto-complete" // 应用自定义样式的类名
    placeholder="请输入地址"
  />
);
 
export default AutoCompleteWithCustomStyle;

在CSS文件中，你可以这样写自定义样式：

/* auto-complete-style.css */
.custom-auto-complete .ant-select-selection {
  background-color: #fafafa; /* 背景色 */
  border-color: #ddd; /* 边框色 */
}
 
.custom-auto-complete .ant-select-selection:focus {
  border-color: #1890ff; /* 聚焦时的边框色 */
}

请确保你的自定义CSS类和Antd的样式选择器匹配，以便样式能正确应用到组件上。