How to set border-radius to ant design Select component

user_8300317 0
Viewed 1255

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;
antd reactjs javascript
1 Answers

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;
}
user_87053430
Related