title: How to overwrite Material UI tooltip inline styles?
body: <p>I am currently developing a React component that leverages the <a href="https://material-ui.com/" rel="noreferrer">Material UI</a> <a href="https://material-ui.com/api/tooltip/" rel="noreferrer">Tooltip</a> component. Within my component, I need to manually re-position the Mui Tooltip via the root <code>popper</code> element (<code>MuiTooltip-popper</code>). </p>
  
  <p>But, the Mui Tooltip is rendered with a handful of inline CSS properties out-of-the-box:</p>
  
  <pre><code>position: absolute;
  transform: translate3d(792px, 68px, 0px); 
  top: 0px;
  left: 0px;
  will-change: transform;
  </code></pre>
  
  <p>If one attempts to provide new styles to replace these within the <code>style</code> attribute, the properties are simply not applied - they vanish completely. If one attempts to provide replacement styles via a class (e.g. via the <a href="https://material-ui.com/styles/basics/" rel="noreferrer">CSS-in-JS approach</a> advocated by Material UI), these styles are not applied as the inline style has precedence. </p>
  
  <p>I have been able to overwrite the styles using the <code>!important</code> flag in my CSS class. However, doesn't feel like a very elegant solution. Is there a more "clean" way I can overwrite the styles?</p>