So I'm trying to learn MUI, but it is a bit hard to get my head around the styling and the theme aspect. Does anyone know why gridContainer class is working and boxContainer class is not?

Home.jsx

import React from  'react';
import { ThemeProvider, createTheme } from  '@mui/material/styles';
import { makeStyles } from  '@mui/styles';
import { Box, Card, CardMedia, Grid, Typography } from  '@mui/material';
import theme from  '../themes/theme';
const  useStyles  =  makeStyles((theme) => ({
    gridContainer: {
        display: 'flex',
    },
    boxContainer: {
        display: 'flex',
        alignItems: 'center',
        margin: '50px',
        background: 'red',
    },
}));

const  Home  = () => {
    const  classes  =  useStyles();
    return (
        <ThemeProvider  theme={theme}>
            <Grid  container  className={classes.gridContainer} xs={12}>
                <Box  classeName={classes.boxContainer}>
                    <Typography  variant="body1">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie                       tincidunt odio, sed scelerisque nunc accumsan sed. In tincidunt sapien non ligula tempus consequat. Maecenas pharetra massa enim, quis rutrum tortor feugiat at. Ut aliquam augue ut justo bibendum euismod. Vestibulum eu aliquet massa, eget scelerisque tellus. Donec quis porta mi, sed aliquet erat. Aliquam vulputate feugiat enim, sit amet luctus lectus pulvinar id. Aliquam erat volutpat. Cras porta lobortis malesuada. In ornare mollis volutpat.
                    </Typography>
                </Box>
                <Box  classeName={classes.boxContainer}>
                    <Card>
                        <CardMedia
                        component="img"
                        image="img/brand_logo_black.svg"
                        alt="Brand logo"
                        />
                    </Card>
                </Box>

            </Grid>
        </ThemeProvider>
        );
};
export default Home;

theme.js

import {
    createTheme
} from '@mui/material';

const theme = createTheme({
    components: {
        MuiButton: {
            styleOverrides: {
                // Name of the slot
                root: {
                    // Some CSS
                    fontSize: '1rem',
                },
            },
        },

        MuiCssBaseline: {
            styleOverrides: `
            @font-face {
              font-family: 'AvenirNext';
              font-style: normal;
              font-display: swap;
              font-weight: 400;
              src: local('Avenir'), local('AvenirNext'), url(${AvenirNext_Regular}) format('otf');
              unicodeRange: U 0000-00FF, U 0131, U 0152-0153, U 02BB-02BC, U 02C6, U 02DA, U 02DC, U 2000-206F, U 2074, U 20AC, U 2122, U 2191, U 2193, U 2212, U 2215, U FEFF;
            }
          `,
        },
    },
    palette: {
        primary: {
            main: '#4295aa',
        },
        secondary: {
            main: '#dea3ac',
        },
    },
    typography: {
        fontFamily: 'Nunito Sans, Roboto, sans-serif',
    },
});

export default theme;

CodePudding user response：

You have typo classeName correct className. Example:

className={classes.boxContainer}