I want to add a rule for all <p> 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.

Is it not supported?

I'm trying to do something like this:

const useStyles = makeStyles((theme: Theme) =>

    createStyles({

        'p': {

            margin: 0,

        },

        someClass: {

            fontSize: 14,

        },

    })

);

EDIT:

Using Ryan's solution works, but creates a new problem:

import React from 'react';

import { makeStyles, Theme, createStyles } from '@material-ui/core';



const useStyles = makeStyles((theme: Theme) =>

    createStyles({

        root: {

            '& 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 `<p>` inside a CSS class

        title: {

            margin: '0 0 16px',

        },

    })

);



export default () => {

    const classes = useStyles({});



    return (

        <div className={classes.root}>

            <p className={classes.title}>My title</p>

            <p>A paragraph</p>

            <p>Another paragraph</p>

        </div>

    );

};