CODEWITHSUNDEEP
cssreactjsantd
Saif eldeen Adel
Saif eldeen Adel

Reputation: 388

Custom input element with Ant Design Autocomplete?

I want to use Ant design's autocomplete functionality, however I dont want to be limited to their input field look. So I want to style it however I want. Can i do that?

My custom input field

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);
    }
`;

The Autocomplete i want to style

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

It seems like the actual input field is surrounded by a div and thats why stuff like width works. However when i do padding and other stuff, the div is the one affected and not the input field inside it.

Upvotes: 0

Views: 3601

Answers (1)

Nadia Chibrikova
Nadia Chibrikova

Reputation: 5036

You can do it by adding your styled input as a child of AutoComplete :

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

Upvotes: 1

Related Questions