Popover arrow addition
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Summary 💡
I’m trying to add customize my Menu components by adding an arrow to them, but unfortunately it looks like that may not be possible. I had hoped the issue had been covered in #10772, but despite the title of that issue, it was only solved for Popper
s, not Popover
s. I would just use a Popper
, but Select
components use Menu
s which use Popover
s, and there doesn’t seem to be an escape hatch to override that. I can’t use pseudo elements, since the absolutely positioned element is overflow: hidden
, and a pseudo element arrow can’t sit outside of it.
Ideally there could be a prop similar to Poppers modifiers={{ arrow: { enabled: true }}}
that adds an element adjacent to the Paper
in Popover
somewhere around here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Popover/Popover.js#L398-L406
Examples 🌈
https://material-ui.netlify.com/components/popper/#scroll-playground
Motivation 🔦
Hopefully this further makes Material UI more themeable.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:12
- Comments:6 (2 by maintainers)
Top GitHub Comments
Not generic but if you override the paper class you can add an arrow (in this case a down arrow):
@tedpennings You can use the source of the tooltip as inspiration:
https://github.com/mui-org/material-ui/blob/763266ec723f6e2d426342d33c48e5fc478e7cdb/packages/material-ui/src/Tooltip/Tooltip.js#L21-L58