[material-ui][Tooltip] Tooltip/popper styles are not applying through direct sx styles in Tooltip component

[jvega190]

Steps to reproduce

Link to live example

Steps:

1. See how the styles applied to tooltip or popper are not applying in the link above

Current behavior

No response

Expected behavior

No response

Context

Styles don't apply when using the Tooltip sx prop. It does work using slotProps and add the sx styles on the tooltip

<Tooltip
   ...
   slotProps={{ tooltip: { sx: { ... } } }}
/>...

(the code above works)

The problem is, if I want to use the styled API, I'm not able to override the tooltip/popper styles.

Your environment

npx @mui/envinfo

Browser: Google chrome 127.0.6533.72 on ubuntu 22.04

Search keywords: tooltip, styles, popper

[MeetBagda]

Steps to reproduce

Link to live example

Steps:

1. See how the styles applied to tooltip or popper are not applying in the link above

Current behavior

No response

Expected behavior

No response

Context

Styles don't apply when using the Tooltip sx prop. It does work using slotProps and add the sx styles on the tooltip

<Tooltip
   ...
   slotProps={{ tooltip: { sx: { ... } } }}
/>...

(the code above works)

The problem is, if I want to use the styled API, I'm not able to override the tooltip/popper styles.

Your environment

npx @mui/envinfo
Search keywords: tooltip, styles, popper

Hey @jvega190,

The reason behind this issue is Tooltip component is structured in a way that the sx prop doesn't directly target the desired elements.

It can be solve by using the slotProps

<Tooltip
  slotProps={{
    tooltip: { sx: { backgroundColor: 'red', color: 'white' } },
    popper: { sx: { backgroundColor: 'blue' } }
  }}
>
  ...
</Tooltip>

you can customise the Tooltip as well but this approach allows granular control over Tooltip and Popper styles.

[ZeeshanTamboli]

It is expected. See #28679 and #11467. As for styling using the styled API, did you take a look at https://mui.com/material-ui/integrations/interoperability/#portals.

[jvega190]

Thanks, noted!