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

没有嵌套input输入框：

 <AutoComplete
    options={options}
    onSelect={onSelect}
    onSearch={onSearch}
    onChange={onChange}
    placeholder='请输入'
/>

// 设置输入框高度
@input-height: 40px;
.ant-select-auto-complete {
 width: 100%;
 .ant-select-selector {
   height: @input-height;
   background: rgba(0, 133, 255, 0.2);
   border: 1px solid #0085FF;
   .ant-select-selection-search {
     input {
       height: 100%;
       color: white;
     }
   }
   .ant-select-selection-placeholder {
     line-height: calc(@input-height - 2px);
   }
 }
}

实现效果：

嵌套input输入框（为了实现prefix或suffix）

<AutoComplete
  options={options}
  onSelect={onSelect}
  onSearch={onSearch}
  onChange={onChange}
>
  <Input prefix={<SearchOutlined />} placeholder='请输入'/>
</AutoComplete>

@input-height: 40px;
.ant-select-auto-complete {
  width: 100%;
  .ant-select-selector {
    .ant-select-selection-search-input {
      height: @input-height;
      background: rgba(0, 133, 255, 0.2);
      border: 1px solid #0085FF;
      .ant-input-prefix {
        margin-right: 16px;
        color: #0085FF;
      }
      input {
        line-height: calc(@input-height - 2px);
        color: white;
        background: transparent;
      }
    }
  }
}

实现效果