Styling out of flow elements e.g. Calendar Overlay

[MicroMichaelIE]

I'm using PrimeReact as a base for my UI-Library. I have been using Styled-Components to apply my theme, and have no problems doing simple elements like Buttons.

const ButtonWrapper = styled(Button)<StButtonProps>(
  () => {

    const theme: DefaultThemeType = (getTheme() as unknown as DefaultThemeType)

    const styles = theme.elements.button;

    return {
      "&.p-button": {
        ...extractValues(styles.base),
        ...extractValues(styles.variants[selectedVariant].states.enabled),

        "&.p-button-sm": {
          ...extractValues(styles.size.small),
        },
    };
}
  }

I run into the problem with Styled-Components when the elements are out of the document flow, as with Calendar Overlay component, and I cannot style them using class overrides like above as they are no longer direct children.

Has anyone figured out a way to style these items outside of the CreateGlobalStyles function?

Desired behaviour would be to have one Component encasing the entirety if the styling for itself, only using the theme as with button.