I am using ant design and I want to change border-radius of Select component but it is not working. The code is below. And i tried to classname method but it doesn't work.
import React from 'react'
import { Select } from 'antd'
const { Option } = Select;
const Dropdown = ({placeholder ,...restProps}) => {
return (
<Select
style={style}
{...restProps}
placeholder={placeholder}
>
</Select>
)
}
const style = {
width: 450,
borderRadius: '10px',
margin:3
}
export default Dropdown;
If you inspect the element you could find that the style is going to the div with classname ant-select. But the border is set in the inner div element with classname ant-select-selector.
Ant Design doesnt give any prop to override the style for it, but you can override by using CSS.
you can wrap with a custom div and provide CSS to override the style set by ant. Example,
<div className="my-select-container">
<Select
style={style}
{...restProps}
placeholder={placeholder}
>
</Select>
</div>
and in CSS file,
.my-select-container .ant-select .ant-select-selector {
border-radius:20px;
}