Material UI 5种风格令人困惑

Question

所以我正在努力学习 MUI，但我有点难以理解样式和主题方面。有谁知道为什么 gridContainer class 有效而 boxContainer class 无效？

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;

Answer 1

您有错字 classeName 正确 className。示例：

className={classes.boxContainer}

Material UI 5种风格令人困惑

Material UI 5 Styles are confusing

styles

reactjs

material-ui