Javascript makeStyles中的css规则名称

而不是

const useStyles = makeStyles({
    PopoverRoot: {
        textAlign: "center",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
    PopoverPaper: {
        padding: '1em',
    },
    OtherStyles: {
        //...
    }
});

function foo() {
    classes = useStyles();
    return(
        <Popover classes={classes.Popover}>...</Popover>
        <Something classes={classes.OtherStyles}>...</Something>
    )
}

我想要一些嵌套的东西，像这样

const useStyles = makeStyles({
    Popover: {
        root: {
            textAlign: "center",
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
        },
        paper: {
            padding: '1em',
        },
    },

    OtherStyles: {
        //...
    }
});

function foo() {
    classes = useStyles();
    return(
        <Popover classes={classes.Popover}>...</Popover>
        <Something classes={classes.OtherStyles}>...</Something>
    )
}

不幸的是，这不起作用。首先，React抱怨使用类而不是类名，所以我改变了这一点。问题是，样式不是以这种方式应用的

---

如何实现这一点？

首先必须定义类

const classes = useStyles()

然后使用它们：

<Popover className={classes.Popover}>...</Popover>

---

你能展示一下你在哪里使用useStyles函数钩子的代码吗？你检查过这上面的文档了吗@阿波罗，当然，上面加了