title: Can backgroundColor overlap a div?
body: <p>I created an animation which highlights active elements. Now my challenge is that I want that
  highlighting/backgroundColor to overlap a bit without adding padding to the element itself. Currently, the
  background is too close to the element (svg): <a href="https://imgur.com/a/g2S6jcX" rel="nofollow noreferrer">https://imgur.com/a/g2S6jcX</a></p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
    root: {},
    highlight: {
      animation: `$yellowflash-bg 4s ease-in-out`,
    },
    &quot;@keyframes yellowflash-bg&quot;: {
      from: {
        backgroundColor: &quot;yellow&quot;,
      },
      to: {
        backgroundColor: &quot;transparent&quot;,
      },
    },
  }));
  
  const Element = () =&gt; {
    const classes = useStyles();
    
    return (
      &lt;div
        className={clsx(classes.root, {
          [classes.highlight]:
            currentElementRef &amp;&amp;
            currentElementRef === elementRefs.map.get(element.id),
        })}
      &gt;
        &lt;ElementType
          [...]
        /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>