[Tooltip] Override styles using sx property not working!

[nickchauhan]

• 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

[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

[michal-perlakowski]

@mnajdova I don't think it makes sense to spread other props on the children element - users can pass them to the children directly. I think other props should either be spread on the Popper, or not used at all.

[michaldudak]

I agree. The current behavior is not intuitive.
Changing it, however, may break existing users.

[mnajdova]

@michal-perlakowski totally agree with your point, but as @michaldudak mention, it would be a breaking change. I proposed changing only where the sx prop is set, as it is a new API, and I would consider this a bug fix, not a breaking change.

[mnajdova]

@nickchauhan would you like to create a PR with the changes proposed in #28679 (comment)?

[oliviertassinari]

I don't think it makes sense to spread other props on the children element

The initial implementation of the Tooltip didn't spread the other props. I have done a git blame to find the origin. It was added in #13138 to achieve two outcomes:

1. to stay true to the "root element receive all the extra props" consistency policy. You will find the same pattern with the ClickAwayListener component for instance.
2. to play nicely with elements that use the cloneElement API, fixing Tooltip inside CardActions raises Warning: Failed prop type #12302.

[mnajdova]

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

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

I am closing the issue.