Javascript 材质ui makeStyles：如何按标记名设置样式？

我想为当前组件中的所有

添加一条规则。我在任何地方都找不到关于如何按标记名添加CSS规则的信息（材料ui文档、堆栈溢出等）

不支持吗

我正在尝试这样做：

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        'p': {
            margin: 0,
        },
        someClass: {
            fontSize: 14,
        },
    })
);

编辑：

使用Ryan的解决方案是可行的，但会产生一个新问题：

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>
    );
};

从“React”导入React；
从“@material ui/core”导入{makeStyles，Theme，createStyles}；
const useStyles=makeStyles（（主题：主题）=>
创建样式({
根目录：{
“&p”：{
保证金：0，
},
},
//我希望此规则覆盖上述规则。在当前配置中不可能这样做，因为“.root p”比“.title”更具体`
//这个问题源于这样一个事实：我必须在CSS类中嵌套“”规则
标题：{
边距：“0 0 16像素”，
},
})
);
导出默认值（）=>{
const classes=useStyles（{}）；
返回(
我的标题
段落

另一段

);
};

由于您希望将此范围限定到您的组件，因此您需要一个类来应用到您的组件（例如，下面示例中的

classes.root

）。然后，您可以使用

&p

将该元素中的所有

p

元素作为目标。如果随后需要覆盖组件中另一个CSS类的

p

标记样式，则可以使用另一个嵌套规则来针对同样具有该类的

p

标记（例如示例中的

classes.title

）

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles（主题=>({
根目录：{
“&p”：{
保证金：0，
“&$title”：{
边距：“0 16像素”
}
}
},
标题：{}
}));
导出默认函数App（）{
const classes=useStyles（）；
返回(
这一段不受影响

这一段不受影响

我的标题
段落

另一段

);
}

---

相关文档：

您可以将css文件添加到项目中，然后像导入“style.css”一样导入它。非常有效，谢谢！不幸的是，现在我遇到了一个新问题：

.someClass p

的规则太具体了，这意味着它覆盖了

createStyles

中的其他样式object@LiranH请在问题代码中显示其他样式。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    "& p": {
      margin: 0,
      "&$title": {
        margin: "0 0 16px"
      }
    }
  },
  title: {}
}));
export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <p>This paragraph isn't affected.</p>
      <p>This paragraph isn't affected.</p>
      <div className={classes.root}>
        <p className={classes.title}>My title</p>
        <p>A paragraph</p>
        <p>Another paragraph</p>
      </div>
    </div>
  );
}