title: How to do an Stepper with progress bars Material-ui
body: <p>I'm working on a Stepper and I want to add a progress bar between each step. I'm using Material-ui Stepper connector to achieve this. But same connector is applied to all steps. That's not a real problem because I can do it using jss.</p>
  <pre><code>bar: { transform: &quot;translateX(-101%) !important&quot; } // This rule can control progress bars
  </code></pre>
  <p>The real problem here is that I don't know how can I add the rule to just one of the bars using jss.</p>
  <p>If there's a better way to add the progress bars, great. I'm just sharing mine to give you more context.</p>
  <p>This is what I have:</p>
  <p><a href="https://i.stack.imgur.com/YsxSB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YsxSB.png" alt="enter image description here" /></a></p>
  <p>Code: <a href="https://codesandbox.io/s/determined-diffie-636ss?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/determined-diffie-636ss?file=/src/App.js</a></p>