CODEWITHSUNDEEP
cssreactjsantdstyled-componentsant-design-pro
xCTAPx
xCTAPx

Reputation: 139

How can I add border-radius CSS property to dropdown ant design element?

I want to add border-radius CSS property to my dropdown component from ant design, but I don't know how I can implement it. I tried to change antd-css file, add style object directly into component, but I haven't got result. I use styled-component - if it is useful information.

Upvotes: 1

Views: 2458

Answers (2)

Tejeshree
Tejeshree

Reputation: 962

I have used basic dropdown menu from https://ant.design/components/dropdown/ (Basically opens menu on hover, if this is what you want)

Style:

.ant-dropdown-menu  {
  border-radius: 50px;
}

Border radius 50px demo screenshot

Update as per requirement:

You can use style={{ borderRadius: 50 }} on your overlay item.

see below screenshot for reference: used style on

Upvotes: 2

xCTAPx
xCTAPx

Reputation: 139

This is my code:

import React from 'react'
import { Dropdown } from 'antd'
import { DropDownProps } from 'antd/lib/dropdown'

interface DropdownProps extends DropDownProps {
  children: React.ReactElement
}

const CustomDropdown = ({ children, overlay, placement }: DropdownProps) => {
  return (
    <Dropdown overlay={overlay} placement={placement || 'bottomLeft'}>
      {children}
    </Dropdown>
  )
}
export { CustomDropdown as Dropdown }

Upvotes: 0

Related Questions