Material Ui - 从哪里加载 CSS 类？第2部分

Question

我开始学习 Material UI - Grid。这是我最近提出的问题的后续行动 Materialui - where to load CSS classes from? 询问在哪里定义Material ui引用的类，即classes.root

？？？ 我根据建议修改了代码，现在编译错误如下： 编译失败 ./src/Materialuig.jsx 第 25:31 行：'props' 未定义 no-undef 第 30:22 行：'Paper' 未定义 react/jsx-no-undef ..

完整代码如下：

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;

Answer 1

您正在使用Paper 组件，但您没有导入它，因此它是未定义的。

您可以像Grid 一样将其导入您的主list of Material-UI imports：

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

或者你可以import it as follows:

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

---

props 未定义，因为您没有在任何地方声明它。 你需要

function Materialuig(props){

而不是

function Materialuig(){