React Bootstrap OverlayTrigger change popperConfig offset px to em?

Question

i'm struggling trying to change the size units of an overlayTrigger's popperConfig from px to em in react (& react bootstrap) and can't seem to find any docs that can help. Any idea on how i can achieve this? Of course, overriding in css is always possible, but cannot seem to find a way to do that either without console errors... Any help would be much appreciated!

      <OverlayTrigger
    trigger={['hover', 'focus']}
    placement="bottom"
    overlay={popover}
    defaultShow={true}
    container={navContainerRef.current}
    popperConfig={{
      modifiers: [
        {
          name: 'offset',
          enabled: true,
          options: {
            offset: [0, 64]===> 64px in em's <====
          }
        },
      ],
    }}
  >
    <NavLink to={link} className={linkClassName}>{linkTitle}</NavLink>
  </OverlayTrigger>

Answer 1

In the popperjs documentation, offset option accepts a function or an array with two elements: https://popper.js.org/docs/v2/modifiers/offset/

the basic offset accepts an array with two numbers in the form [skidding, distance].

...

The option can also take a function provided with some arguments, giving you access to the popper placement, and the reference and popper rects.

Neither array nor the function seem to help you with your use case.

Maybe you can write your own modifier: https://popper.js.org/docs/v2/modifiers/, but it seems exaggerated.

Why don't you just map your em to pixels, with calc() or anything?