[Tooltip] How to customize the tooltip?

[samueldepooter]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Turn Tooltip into styled component
-> use classes attribute to override tooltip class
-> styles should be applied to the element

Current Behavior

I can see that my new tooltip class is on the element itself but without styles.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/yj7wjr753z

1. Render Tooltip
2. Implement styled components
3. Override a specific class with the classes attribute
4. Apply styling to the specified class

Your Environment

Tech	Version
Material-UI	latest
React	latest

[pelotom]

See https://next.material-ui.com/guides/interoperability/#portals

[samueldepooter]

That is not the issue with this component, the styles are just not applied at all. You can try it yourself if you want with my codesandbox.

It works just fine for other material-ui components though.

[artalar]

This is workaround to you
https://codesandbox.io/s/lr20v47ql9

[andrewmclagan]

Yeah this is also effecting us. We cannot apply a style={{ attribute: 'value' }} to a <Tooltip /> component

[oky1]

const styles = theme =>({
 tooltip: {  backgroundColor: 'red' }
});
  <Tooltip  classes={{ tooltip: classes.tooltip }} >...

[aqueiros]

Greetings!
Am I right in thinking that the solutions provided here, don't really fix the problem @samueldepooter reported? I am experiencing this still. I am unable to override Tooltip style using styled-components like it says in This page. Any other component as far as I see works.

Overriding it via classes works sure, but that is not the point of the issue being open.