makeStyles 中的 css 规则名称

Question

而不是拥有

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 抱怨使用 classes 而不是 className，所以我当时改变了它。问题是，样式不是这样应用的。

如何实现？

Answer 1

首先你必须定义类。

const classes = useStyles()

然后使用它们：

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