I'm currently working on a project that requires me to incorporate two drop-down menus inside the search box. Despite following the guidelines provided in the documentation (https://ant.design/components/input), I encountered a problem when trying to add the addonAfter prop to the Input component. This resulted in the overriding of CSS, making it difficult to customize the appearance of the drop-downs using class names. Here is a snippet of my code:
const selectAfter = (
<div className='drop-down'>
<Select defaultValue=".com">
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
<Select defaultValue=".com">
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
</div>
);
const SearchField : React.FC<IInputFieldProps> = (props) => (
<Input className="input-field" {...props} addonAfter={selectAfter} />
);
CSS :
.input-field {
box-sizing: border-box;
height: 2.3em;
}
The challenge I'm facing is that the search box reverts to its default appearance as illustrated in the documentation due to the inability to apply custom CSS styles.
If anyone could offer assistance, it would be greatly appreciated.