使用未定义样式代替MuiHeader（@ Material-ui v4）

Question

我有一个基于SSR的@ Material-ui v4.0.0应用程序。

我按照文档创建了透明CardHeader选项。

import MuiCardHeader from '@material-ui/core/CardHeader';

const useStyles = makeStyles(theme => ({
    root: {
        '&$transparent': {
            position: 'absolute',
            width: '100%',
        },
    },
    transparent: {},
}));

const CardHeader = ({ transparent, ...rest }) => {
    const classes = useStyles();
    return <MuiCardHeader classes={classes} transparent={transparent} {...rest} />;
};

透明标头以标准方式呈现，我将其视为生成的classes对象：

action:
"MuiCardHeader-action"
avatar:
"MuiCardHeader-avatar"
content:
"MuiCardHeader-content"
root:
"MuiCardHeader-root makeStyles-root-404"
subheader:
"MuiCardHeader-subheader"
title:
"MuiCardHeader-title"
transparent:
"undefined makeStyles-transparent-406"

未定义显然看起来是错误的。知道我在做什么错吗？

Answer 1

好的，丢失的部分似乎正在启用className至clxs。恐怕记录不全。

const CardHeader = ({ transparent, ...rest }) => {
    const classes = useStyles();
    return (
        <MuiCardHeader
            classes={classes}
            className={clsx({
                [classes.transparent]: transparent
            })}
            {...rest}
        />
    );
};