title: how to customize tooltip css
body: <p>I use useRef and This is part of my code:</p>
  <pre><code> useEffect(() =&gt; {
        setRange(props.instrument);
        let data = getValues(props.instrument);
        tooltipRef.current.innerHTML = ReactDOMServer.renderToString(
          showTooltip(data.LastTradePrice)
        );
      
    },[]);
  </code></pre>
  <p>and</p>
  <pre><code>const setRange = (instrument) =&gt; {
      let tooltip = tooltipRef.current;
  const rangeInfo = getValues(instrument);
  tooltip.children[0].style.left = `50%`;
  tooltip.children[0].children[0].style.fill =
          rangeInfo.LastTradePrice &gt; rangeInfo.PreviousDayPrice
            ? `${theme.palette.color.green}`
            : `${theme.palette.color.red}`;
   tooltip.setAttribute(&quot;title&quot;, rangeInfo.LastTradePrice);
  }
  </code></pre>
  <p>and</p>
  <pre><code>const showTooltip = (data) =&gt; {
      return (
        &lt;ThemeProvider theme={theme}&gt;
           
            &lt;Grid
              item
              className={classes.currentPrice}
            &gt;
              &lt;LocationIcon
                className={clsx(
                  classes.currentPriceIcon,
                  device.isMobile &amp;&amp; classes.currentPriceIconMobile
                )}
              &gt;&lt;/LocationIcon&gt;
            &lt;/Grid&gt;
        
        &lt;/ThemeProvider&gt;
      );
    };
  </code></pre>
  <p>and</p>
  <pre><code> return (
       &lt;Grid item ref={tooltipRef}&gt;&lt;/Grid &gt;
  )
  </code></pre>
  <p>By default, it shows me a tooltip.How can I apply the style I want to this tooltip?
  This is the default:</p>
  <p><a href="https://i.stack.imgur.com/ZLqBV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZLqBV.png" alt="enter image description here" /></a></p>
  <p>For example, how can I change the tooltip backgroundcolor?</p>