Antd：如何自定义关闭图标和搜索图标样式？

Question

我在自定义关闭图标和搜索图标样式时遇到问题。 我想在输入左侧制作搜索图标，在输入右侧制作关闭图标。 但现在输入右侧有两个图标。

我怎样才能解决这个问题吗？

我的代码在这里

.ant-input {
            padding: 4px 10px 4px 40px;
            border-radius: 20px;
            &-search {
                height: 40px;
                width: 240px !important;
            }
            &-suffix {
                width: 18px;
                > i {
                    font-size: 18px;
                }
            }
        }
 }

<div className='user-list__tollbar--search'>
   <Search
        onChange={this.onSearch}
        style={{width: 200}}
        defaultValue={keyWord}
        allowClear
    />
</div>

Answer 1

您可以使用 antd Input 来解决您的问题

<Input
  prefix={<SearchOutlined />}
  placeholder="Search"
  allowClear
/>