makeStyles in Material UI not applying

Question

I am trying to style my pahe using makeStyles from material ui with react js. it is working for me with some pages, but most of them are not working even if I am using the same styling elements like tha backgroundColor. in the code below, only pageTitle that is working.

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>
  )
}

After trying many solutions, I find out that the styling can be applied only on the div sections, not on th eothers material ui components, any solutions for this ? — AymenSeriti, Feb 18 '22 at 22:43

score 0 · Answer 1 · answered Feb 18 '22 at 22:10

0

You wrote classeName in the example, that's why it won't work.

answered Feb 18 '22 at 22:10

Patrik Szabó

76
6

can you please tell me what should I change, by what, and why ? – AymenSeriti Feb 18 '22 at 22:11
That classeName should be className – Patrik Szabó Feb 18 '22 at 22:12
And for the other ones ? – AymenSeriti Feb 18 '22 at 22:14
The other ones seems fine for me. You corrected the typo, and still doesn't work? – Patrik Szabó Feb 18 '22 at 22:15
Yes, only the pageHeader is working now, the others still not working – AymenSeriti Feb 18 '22 at 22:17

score 0 · Answer 2 · answered May 18 '22 at 23:00

A couple of months from the last answer on this thread but I would like to share what I did when I faced a similar issue:

MUI5 components (such as Paper, Card, etc,) ignore the styles provided through makeStyles command. If you want to override a specific property you should use the styled command, wrapping the MUI5 component on it. For example, you can create a "hook"-kind function where you declare your specifications:

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;

and then you can use it in your PageHeader component:

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

Use makeStyles command to provide CSS-in-JS styles only for non MUI5 components (such as div, etc,).

Hope this suggestion can help.

makeStyles in Material UI not applying

2 Answers2