0

我正在尝试使用来自 Material ui 的 makeStyles 和 react js 来设置我的 pahe 样式。它在某些页面上对我有用，但即使我使用相同的样式元素（如背景颜色），它们中的大多数也无法正常工作。在下面的代码中，只有 pageTitle 有效。

import { Card, Paper, Typography } from '@mui/material'
import { makeStyles } from '@mui/styles';
import React from 'react'


const useStyles = makeStyles(theme => ({
    root:{
        backgroundColor:'#fdfd'
    },
    pageHeader:{
        padding:theme.spacing(4),
        display:'flex',
        marginBottom:theme.spacing(3)
    },
    pageIcon:{
        display: 'inline-block',
        padding: theme.spacing(2),
        color:'#AE431E'
    },
    pageTitle:{
        paddingLeft: theme.spacing(4),
        '& .MuiTypography-subtitle2':{
            opacity: '0.5'
        }
    }
}))

export default function PageHeader(props) {
    const classes = useStyles();
    const {title,subtitle,icon} = props;
  return (
    <Paper className={classes.root} elevation={0} square >
        <div classeName={classes.pageHeader}>
            <Card className={classes.pageIcon}>
                {icon}
            </Card>
            <div className={classes.pageTitle}>
                <Typography
                    variant="h6"
                    component="div"
                >{title}</Typography>
                <Typography
                    variant="subtitle2"
                    component="div"
                >{subtitle}</Typography>
            </div>
        </div>
    </Paper>
  )
}
4

1 回答 1

0

您在示例中编写了classeName，这就是它不起作用的原因。

于 2022-02-18T22:10:06.733 回答