title: CSS child selector in MUI
body: <p>Trying to write a style with MUI equivalent to this in CSS</p>
  <pre class="lang-css prettyprint-override"><code>.deleted td {
      background: red
  }
  </code></pre>
  <p>But not sure how to do it in MUI's <a href="https://material-ui.com/customization/css-in-js/" rel="noreferrer">CSS in JS</a> way.</p>
  <p>Here are the relevant snippets I have currently</p>
  <pre class="lang-css prettyprint-override"><code>const styles = theme =&gt; ({
      deleted: {
          background: '#eee'
      }
  })
  
  &lt;TableRow className={classes.deleted}&gt;
      &lt;TableCell&gt;&lt;/TableCell&gt;
  &lt;/TableRow&gt;
  </code></pre>
  <p>It should generate a style similar to:</p>
  <pre class="lang-css prettyprint-override"><code>.deleted td {
      background: red
  }
  </code></pre>