title: Material UI Tooltip Component overwriting className on children components
body: <p><a href="https://codesandbox.io/s/react-functional-component-forked-ig3mb?file=/src/index.js" rel="nofollow noreferrer">Example Here</a></p>
  <p>There are three buttons visible.</p>
  <p>The first of which has no tooltip, and changes colour based on state and hover.
  The second has a tooltip, and the className is being overwritten, which results in the wrong colours being displayed.
  The third simply has the props re-ordered in the child component to solve the problem.</p>
  <p>My question: Is this the expected behaviour? Do I really have to make <code>className</code> the last prop so that it actually gets used?</p>