Materialui - where to load CSS classes from? part2

问题

I m starting to learn Material UI - Grid. This is a followup to the recent question I had asked Materialui - where to load CSS classes from? asking where to define the classes referenced by Material ui, namely classes.root

???? I modified the code as per a recommendation and now Compilation errors are as follows: Failed to compile ./src/Materialuig.jsx Line 25:31: 'props' is not defined no-undef Line 30:22: 'Paper' is not defined react/jsx-no-undef ..

Here is the complete code:

import React from "react";
import MenuIcon from "@material-ui/icons/Menu";

import {
  Button,
  Icon,
  makeStyles,
  Grid,
  IconButton,
  AppBar,
  Toolbar,
  Typography,
} from "@material-ui/core";


function Materialuig(){

const useStyles = makeStyles({
  root: {
    backgroundColor: "red",
    color: (props) => props.color,
  },
});
    const classes = useStyles(props);
    return (
        <div className={classes.root}>
            <Grid container spacing={3}>
                <Grid item xs={12}>
                    <Paper className={classes.paper}>xs=12</Paper>
                </Grid>
                <Grid item xs={6}>
                    <Paper className={classes.paper}>xs=6</Paper>
                </Grid>
                <Grid item xs={6}>
                    <Paper className={classes.paper}>xs=6</Paper>
                </Grid>
                <Grid item xs={3}>
                    <Paper className={classes.paper}>xs=3</Paper>
                </Grid>
                <Grid item xs={3}>
                    <Paper className={classes.paper}>xs=3</Paper>
                </Grid>
                <Grid item xs={3}>
                    <Paper className={classes.paper}>xs=3</Paper>
                </Grid>
                <Grid item xs={3}>
                    <Paper className={classes.paper}>xs=3</Paper>
                </Grid>
            </Grid>
        </div>
    );
}    
export default Materialuig;

回答1:

You are using the Paper component, but you aren't importing it, thus it is undefined.

You can import it in the same manner as Grid by adding it to your main list of Material-UI imports:

import {
  Button,
  Icon,
  makeStyles,
  Grid,
  Paper,
  IconButton,
  AppBar,
  Toolbar,
  Typography,
} from "@material-ui/core";

or you can import it as follows:

import Paper from '@material-ui/core/Paper';

props is undefined because you aren't declaring it anywhere. You need

function Materialuig(props){

instead of

function Materialuig(){

来源：https://stackoverflow.com/questions/62662275/materialui-where-to-load-css-classes-from-part2

标签

css

reactjs

grid

material-ui