[Tooltip] How to customize the tooltip?

• 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

[oliviertassinari]

Here is a working example following our guide, it can be further improved by adding theme to the styled components theme.

import React from "react";
import styled from "styled-components";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

const StyledTooltip = styled(props => (
  <Tooltip classes={{ popper: props.className }} {...props} />
))`
  & .MuiTooltip-tooltip {
    background-color: papayawhip;
    color: #000;
  }
`;

function StyledComponents() {
  return (
    <StyledTooltip title="Demo">
      <Button>Styled Components</Button>
    </StyledTooltip>
  );
}

export default StyledComponents;

https://codesandbox.io/s/8109v3n1x8?file=/StyledComponentsButton.js

---

If you are wondering what classes you can use, you can find the information in the API docs page:

https://material-ui.com/api/tooltip/

or in the Dev Tool directly:

[artalar]

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