使用 Ant Design 自动完成的自定义输入元素？答案

【问题标题】：Custom input element with Ant Design Autocomplete?使用 Ant Design 自动完成的自定义输入元素？
【发布时间】：2021-02-21 07:10:18
【问题描述】：

我想使用 Ant design 的自动完成功能，但我不想局限于他们的输入字段外观。所以我想随心所欲地设计它。我可以这样做吗？

我的自定义输入字段

const FormInput = styled.input`
    background-color: ${(props) =>
        props.top ? "rgba(122,161,240, 0.3)" : "#EDEDED"};
    font-size: 14pt;
    font-family: var(--san-serif-2);
    font-weight: 300;
    padding: ${(props) =>
        props.percent ? "10px 10px 10px 50px" : "10px 20px 10px 40px"};
    border-radius: 10px;
    outline: none;
    border: none;
    transition: 0.2s ease-in-out;
    width: 100%;

    &:hover {
        background-color: ${(props) =>
            props.top ? "rgba(122,161,240, 0.4)" : "#E4E4E4"};
    }

    &::placeholder {
        color: rgba(122, 161, 240, 1);
    }
`;

我想要设置样式的自动完成

<AutoComplete
     allowClear
     value={symbol}
     options={options}
     style={{
     width: 200,
     }}
     onSelect={onSelect)
     onSearch={onSearch}
     onChange={onChange}
     placeholder="control mode"
     />

看起来实际的输入字段被一个 div 包围，这就是为什么像 width 这样的东西可以工作。但是，当我进行填充和其他操作时，受影响的是 div 而不是其中的输入字段。

【问题讨论】：

从以下之一中分叉您的代码：ant.design/components/auto-complete，以便其他人可以调试。
@m4n0 什么？你什么意思？我已经从你给我的那个链接复制了那个自动完成组件。展开基本用法的代码，您将找到该组件。 Wdym by fork 我的代码？

标签： css reactjs antd

【解决方案1】：

您可以通过将您的样式输入添加为AutoComplete 的子项来做到这一点：

<AutoComplete
 allowClear
 value={symbol}
 options={options}
 onSelect={onSelect)
 onSearch={onSearch}
 onChange={onChange}
 placeholder="control mode">
   <FormInput />
 </AutoComplete>

【讨论】：

如果有人看到这个 lmao，你会发现你需要删除自动完成中的占位符，而是将其添加到自定义输入中。非常直接，尽管