Material UI 中的 makeStyles 不適用

Question

我正在嘗試使用來自 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>
  )
}

Answer 1

您在示例中編寫了classeName ，這就是它不起作用的原因。

Answer 2

距離這個帖子的最后一個答案還有幾個月的時間，但我想分享一下我在遇到類似問題時所做的事情：

1. MUI5 組件（如 Paper、Card 等）忽略通過makeStyles命令提供的樣式。 如果要覆蓋特定屬性，則應使用styled命令，將 MUI5 組件包裝在其上。 例如，您可以在聲明規范的地方創建一個“鈎子”類函數：

import { styled } from '@mui/material/styles';
import { Paper } from '@mui/material';

const usePageHeaderStyle = () => {
    const styledPaper = styled(Paper)(({theme}) => ({
        backgroundColor: theme.palette.background.default, //property to override
    }));

    return { styledPaper };
};

export default usePageHeaderStyle;

然后你可以在你的PageHeader組件中使用它：

export default function PageHeader(props) {
    const {styledPaper: StyledPaper} = usePageHeaderStyle();
    const {title,subtitle,icon} = props;
  return (
    <StyledPaper elevation={0} square >
     ...
    </StyledPaper>
}

2. 使用makeStyles命令為非 MUI5 組件（例如div等）提供 CSS-in-JS 樣式。

希望這個建議能有所幫助。