title: material-ui makeStyles: how to style by tag name?
body: <p>I want to add a rule for all <code>&lt;p&gt;</code> in the current component. I couldn't find information anywhere (material-ui documentation, Stack Overflow, etc.) on how to add CSS rules by tag name.</p>
  
  <p>Is it not supported?</p>
  
  <p>I'm trying to do something like this:</p>
  
  <pre><code>const useStyles = makeStyles((theme: Theme) =&gt;
      createStyles({
          'p': {
              margin: 0,
          },
          someClass: {
              fontSize: 14,
          },
      })
  );
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Using Ryan's solution works, but creates a new problem:</p>
  
  <pre><code>import React from 'react';
  import { makeStyles, Theme, createStyles } from '@material-ui/core';
  
  const useStyles = makeStyles((theme: Theme) =&gt;
      createStyles({
          root: {
              '&amp; p': {
                  margin: 0,
              },
          },
          // I want this rule to override the rule above. It's not possible in the current configuration, because `.root p` is more specific than `.title`
          // This problem originates from the fact that I had to nest the rule for `&lt;p&gt;` inside a CSS class
          title: {
              margin: '0 0 16px',
          },
      })
  );
  
  export default () =&gt; {
      const classes = useStyles({});
  
      return (
          &lt;div className={classes.root}&gt;
              &lt;p className={classes.title}&gt;My title&lt;/p&gt;
              &lt;p&gt;A paragraph&lt;/p&gt;
              &lt;p&gt;Another paragraph&lt;/p&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>