title: Multiple jss in components when using react-planet which override other components' styles
body: <p>I added the <code>&lt;Planet/&gt;</code> (from react-planet) to my App and the placement of some <code>&lt;Grid/&gt;</code> (from the Material UI) components changed.</p>
  <p>While looking inside &quot;Elements&quot; in DevTool I noticed that divs inside the <code>&lt;Planet/&gt;</code> component have two classes <code>jss3</code> and <code>jss{i}</code> where <code>i</code> is the next integral number. Each has different properties inside which overwrites every component in App that is using one of the <code>jss{i}</code> classes.</p>
  <p>I also noticed that at first render <code>i</code> iteration, which applies to <code>jss{i}</code> used in newly created divs, starts from 1 and ends at 9 - because I have 6 planets so 1 for the main div, 2 for the central planet, 3 for divs' first class, and 4-9 for the six divs' second class. After the second render number goes from 10 to 18.</p>
  <p>Screenshots of Elements at <a href="https://i.stack.imgur.com/wL4bq.png" rel="nofollow noreferrer">first</a> render and <a href="https://i.stack.imgur.com/Xg0sb.png" rel="nofollow noreferrer">second</a>.</p>
  <p><a href="https://i.stack.imgur.com/HoMLq.png" rel="nofollow noreferrer">The <code>class ={jss3 jss4}</code> example</a></p>
  <p><a href="https://i.stack.imgur.com/NFwiu.png" rel="nofollow noreferrer">The <code>class ={jss3 jss5}</code> example</a></p>
  <p>I assume that after creating planets by <code>&lt;Planet/&gt;</code>, whose children have two classes, the newly created class <code>jss{i}</code>, based on <code>makeStyles-root-{i}</code>, is overwriting properties of <code>jss{i}</code>, which is used somewhere else on page by <code>&lt;Grid/&gt;</code> components thus changing placement for the whole page.</p>
  <p>Code where <code>&lt;Planet/&gt;</code> component is used:</p>
  <pre><code>return (
      &lt;Grid
        item
        container
        justifyContent = &quot;center&quot;
        style = {{ margin: 30 }}
      &gt;
        &lt;Planet
          centerContent={
            &lt;Fab size=&quot;small&quot; color=&quot;primary&quot; aria-label=&quot;add&quot; onClick={handleOpen}&gt;
              &lt;AddIcon /&gt;
            &lt;/Fab&gt;
          }
          open={isOpen}
          autoClose
          orbitRadius= {50}
          rotation = {90}
          hideOrbit
          friction = {20}
        &gt;
          &lt;div/&gt;
          &lt;div/&gt;
          &lt;div/&gt;
          &lt;Fab size=&quot;small&quot; color=&quot;primary&quot; aria-label=&quot;addBarIcon&quot; onClick={handleChartAddLineChart}&gt;
            &lt;ShowChartIcon /&gt;
          &lt;/Fab&gt;
          &lt;Fab size=&quot;small&quot; color=&quot;primary&quot; aria-label=&quot;addBarIcon&quot; onClick={handleChartAddBarChart}&gt;
            &lt;BarChartIcon /&gt;
          &lt;/Fab&gt;
          &lt;Fab size=&quot;small&quot; color=&quot;primary&quot; aria-label=&quot;addBarIcon&quot; onClick={handleChartAddPieChart}&gt;
            &lt;PieChartIcon /&gt;
          &lt;/Fab&gt;
        &lt;/Planet&gt;
      &lt;/Grid&gt;
    );
  </code></pre>
  <p>I tried putting only <code>&lt;div/&gt;</code> components inside <code>&lt;Planet/&gt;</code> but nothing changed. Changing from <code>&lt;Grid/&gt;</code>  to normal <code>&lt;div/&gt;</code>, also didn't change anything.
  Also, I tried to find a similar problem on StackOverflow or somewhere else but I am not sure how to describe the problem using proper keywords.</p>
  <p>I am not sure if it is some bug in the <code>react-planet</code> library that makes <code>react-planet</code> and <code>material-ui</code> impossible to use together or if there is a problem inside my code.</p>