title: custom styling for material UI tooltip arrow?
body: <p>I would like to add a custom style for Material UI tooltip arrow but I can not set the border color and the background color.</p>
  <p>This is the configuration I have - react:</p>
  <pre><code>const useStylesBootstrap = makeStyles(theme =&gt; ({
  arrow: {
      // color: '#E6E8ED',
      border: '1px solid #E6E8ED',
  },
  tooltip: {
      backgroundColor: theme.palette.common.white,
      border: '1px solid #E6E8ED',
      color: '#4A4A4A'
  },
  
  }));
  </code></pre>
  <p>This is what I want to achieve:</p>
  <p><a href="https://i.stack.imgur.com/UHCZ6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UHCZ6.png" alt="enter image description here" /></a></p>
  <p>I want to apply a gray color in the triangle border and the background will be white.</p>
  <p>On the arrow configuration, the border config will not work, it will apply a border color in the  square that's housing the triangle.  Without material UI, the issue could be solved using the pseudo <code>:before</code> and <code>:after</code> to achieve the desired output.  I would like to know if there is a solution to this using material UI custom configuration. Not too familiar with Material UI, your help will be appreciated</p>