Add optional spacing between IconMenu Popover and its anchor icon/button

[zuk]

I'm trying to add some space between the Popover generated by IconMenu and its anchor FloatingActionButton. That is, I want the menu to appear a few pixels above the anchored icon, rather than directly above it.

I've tried just about every CSS trick on the style, menuStyle, and iconStyle property, but no dice. Doing it with the various style properties doesn't work because there doesn't seem to be a way to apply a custom style to the popover container, and it can't be done with CSS selectors because the Popover gets added to the document root and has no distinguishing CSS class or any other way to make it targetable.

Am I missing something? Is there some easy way to do this? Or do I have to implement a custom version of IconMenu to do it?

[willemx]

+1
I would like the menu appear below the button; not covering it.

[mbrookes]

@willemx - for you use case you just need to adjust the anchor and target to suit. A bottom-left target with a top-left anchor will have the menu open immediately below the button.

I think @zuk is looking for the ability to add some spacing between the button and the popover. If that' can't be sone with styling ((I haven't tried), then a custom component isn't difficult.

[willemx]

Thanks @mbrookes, that solved 97% of my problem.
However, I still would like to have an offsetY-tag to add a bit of extra pixels to get the menu (popover container) further down (it is still covering a bit of my toolbar).

[edwinwong90]

There is a props called anchorPosition which to let you define the position number, but the side effect is not responsive. If you set anchorReference is default ('anchorEl') the position will calculate itself and it always pop up start from the element you click. In order to add some gap space between the pop up panel and the element. How I did is I use a button wrap you element with some padding. The trick is the button wrapper is transparent.

[depiction]

I agree that there should be an offset option. Adding padding around the button's container to adjust the position isn't always feasible without altering the design. Manually setting the Popover's position is also complex because you have to calculate the position on mount and every time the browser window resizes or the popover's content size changes.

Edit: I figured out that I could adjust the position using CSS transform on a class, then passing that class to the Popover.

[krehwell]

This things do the trick for me

// adding 2rem gap to right 
const useGapStyles = makeStyles({
    paper: {
        marginLeft: "-2rem"
    }
});

...
// inside the component
const classes = useGapStyles();

<Popover
    classes={{ paper: classes.paper }}
    ...
/>

[RAJ4823]

This trick works for me.
You can adjust x or y position in translate()

  <Popover
       ....
        sx={{ transform: 'translate(0px, -20px)' }}
  >