title: React MUI timeline dot color change
body: <p>Hi I want to override the default color of MUI TimelineDot component. I simply did this</p>
  <pre><code>&lt;TimelineDot
  sx={{
  '&amp; .MuiTimelineDot-root': { backgroundColor: '#00FF00' },
  }}
  /&gt;
  </code></pre>
  <p>But this seems not working. What went wrong in my code?</p>
  <p>This is my <a href="https://codesandbox.io/s/cold-violet-mnr6wi" rel="nofollow noreferrer">Codesandbox link</a></p>