[Tooltip] Override styles using sx property not working!

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I’m trying to override the Tooltip label and arrow styles using sx prop. But when I apply CSS in sx property it applies the CSS to the wrapped component instead of the Tooltip.

Expected Behavior 🤔

Overriding Tooltips style should be easy with sx property.

Steps to Reproduce 🕹

Please find the stackblitz link where I replicated the issue.

Context 🔦

My component will receive a dynamic colour and I want to apply dynamic border colour to the tooltip using props. Using sx property will be much easier.

Your Environment 🌎

`npx @mui/envinfo`

System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 16.9.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.23.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.31)
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1
    @emotion/styled: ^11.3.0 => 11.3.0
    @mui/core:  5.0.0-alpha.48
    @mui/icons-material: ^5.0.1 => 5.0.1
    @mui/material: ^5.0.1 => 5.0.1
    @mui/private-theming:  5.0.1
    @mui/styled-engine:  5.0.1
    @mui/styles: ^5.0.1 => 5.0.1
    @mui/system: ^5.0.1 => 5.0.1
    @mui/types:  7.0.0
    @mui/utils:  5.0.1
    @types/react: ^17.0.24 => 17.0.24
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.4.3 => 4.4.3

[muswain]

@nickchauhan the solution would be to use the new componentsProps API

<Tooltip componentsProps={{ popper: { sx } }} />

I am closing the issue.

the above complained on sx not being available on popper.

The below works though. could override the tooltip and the arrow as well

<Tooltip title="some title" componentsProps={{ tooltip: { sx: { backgroundColor: '#FFFFE6', }, } }} />

[mnajdova]

Thanks for the report @nickchauhan Looks like the sx prop is being spread on the children element instead of the Popper. This diff should help:

index 7a332519e2..02f614e8da 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -252,6 +252,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
     title,
     TransitionComponent = Grow,
     TransitionProps,
+    sx,
     ...other
   } = props;

@@ -649,6 +650,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
         {...interactiveWrapperListeners}
         {...PopperProps}
         popperOptions={popperOptions}
+        sx={{ ...sx, ...PopperProps.sx }}
         ownerState={ownerState}
       >
         {({ TransitionProps: TransitionPropsInner }) => (

Also, I think we need to prioritize adding components and componentsProps on the portal components, so that we can allow users to customize and add overrides on them. cc @michaldudak