title: How to modify the wrapper css rule of a Tabs component to make the text aligned to the left in a vertical tab in Material-UI?
body: <p>By default, <a href="https://i.stack.imgur.com/9iEm6.png" rel="nofollow noreferrer">text inside the wrapper is aligned center</a>.</p>
  <p>How can I modify the wrapper rule in</p>
  <pre><code>    &lt;span class=&quot;MuiTab-wrapper&quot;&gt;Item One&lt;/span&gt;
  </code></pre>
  <p>to make the <a href="https://i.stack.imgur.com/hqh7k.png" rel="nofollow noreferrer">tab text aligned left (like I did in the devtools, i.e. make the flex-direction to &quot;row&quot;) </a> ?</p>
  <p>I tried &quot;Specific variation for a one-time situation&quot; using $ruleName in <a href="https://material-ui.com/customization/components/#1-specific-variation-for-a-one-time-situation" rel="nofollow noreferrer">Material UI Customizing components documentation</a> and in-line styling but to no avail.</p>
  <p>Here's the sandbox <a href="https://codesandbox.io/s/hopeful-bose-nzr3r" rel="nofollow noreferrer">link</a></p>
  <p>(Note: I commented out the $ruleName on useStyles and just left the in-line styling. You cant try it yourself by commenting out and trying one option after another. None of the options work for me).</p>