title: Material-UI, my Toggle Switch are so ugly
body: <p>I'm new with Material UI and I don't understand why my Toggle looks like that...<a href="https://i.stack.imgur.com/tXe16.jpg" rel="nofollow noreferrer">1</a> and <a href="https://i.stack.imgur.com/z8pGh.jpg" rel="nofollow noreferrer">2</a></p>
  <p>I don't have any compilations issues and my code is very simple :</p>
  <pre><code>    return (
      &lt;Grid container spacing={2}&gt;
          &lt;Grid item xs={6}&gt;&lt;Button variant=&quot;contained&quot; &gt;{exploitantLigne.raisonSociale}&lt;/Button&gt;&lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;&lt;/Grid&gt;
          &lt;Grid item xs={3}&gt;
          &lt;FormGroup&gt;
            &lt;FormControlLabel control={&lt;Switch defaultChecked /&gt;} color=&quot;primary&quot; label=&quot;&quot; /&gt;
          &lt;/FormGroup&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  </code></pre>
  <p>And of course, in SandBox everything works perfectly !</p>
  <p>Here is my Package.json, Do Idid anything wrong ?</p>
  <pre><code>    {
    &quot;name&quot;: &quot;ve-session&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@emotion/react&quot;: &quot;^11.7.1&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.6.0&quot;,
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;@mui/icons-material&quot;: &quot;^5.4.2&quot;,
      &quot;@mui/lab&quot;: &quot;^5.0.0-alpha.69&quot;,
      &quot;@mui/material&quot;: &quot;^5.4.2&quot;,
      &quot;@mui/styled-engine-sc&quot;: &quot;^5.4.2&quot;,
      &quot;@mui/styles&quot;: &quot;^5.4.2&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.2&quot;,
      &quot;@testing-library/react&quot;: &quot;^12.1.3&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;@types/react&quot;: &quot;^17.0.39&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.11&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-router-dom&quot;: &quot;^6.2.1&quot;,
      &quot;react-scripts&quot;: &quot;5.0.0&quot;,
      &quot;styled-components&quot;: &quot;^5.3.3&quot;,
      &quot;ts-loader&quot;: &quot;^9.2.6&quot;,
      &quot;typescript&quot;: &quot;^4.5.5&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>
  <p>Thanks !</p>