Dropdown on button click using Material UI

Question

How to show dropdown on button click using material ui?

Currently, I'm able to do so but extra select field is getting populated which is not required. I don't want to hide select field with css.

Also, How can I change width, height, position and other properties of generated popover using material ui? codesandbox url: https://codesandbox.io/s/du8mr

current implementation

popover

I think you are looking for something like this. material-ui.com/components/menus/#menulist-composition. — Darshan J
– Darshan J, Commented Jan 12, 2021 at 12:20

c0m1t · Accepted Answer · 2021-01-12 12:22:31Z

3

You can use Menu component instead of a Select component.

You can change the Menu props using MenuProps which receives all Popover props.

From Menu documentation:

Any other props supplied will be provided to the root element (Popover).

answered Jan 12, 2021 at 12:22

c0m1t

1,2531 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3211534 Over a year ago

How can I change width, height, position and other properties of generated popover using material ui?

c0m1t Over a year ago

See this example for Popover. If you do not want the Select, you can use a Menu which uses Popover component under the hood and you can pass all the props to Menu. You can use CSS to set height and width for Menu component.

user3211534 Over a year ago

How can I pass "Popover" props via "Menu"?

c0m1t Over a year ago

You can pass all Popover props directly to Menu component. See the quotation above. Meaning you can do <Menu anchorOrigin={{horizontal: 'center', vertical: 'vertical'}} />

Collectives™ on Stack Overflow

Dropdown on button click using Material UI

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related