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

IT技术 css reactjs grid material-ui
2021-05-18 17:33:43

我开始学习 Material UI - Grid。这是我最近问Materialui 的问题的后续 - 从哪里加载 CSS 类？ 询问在哪里定义 Material ui 引用的类，即 classes.root

???? 我按照建议修改了代码，现在编译错误如下： Failed to compile ./src/Materialuig.jsx Line 25:31: 'props' is not defined no-undef Line 30:22: 'Paper' is not定义 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;
1个回答

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

您可以以与Grid将其添加到Material-UI 导入的主列表相同的方式导入它：

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

或者您可以按如下方式导入它：

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

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

function Materialuig(props){

代替

function Materialuig(){
其它你可能感兴趣的问题
上一篇React Rerender 动态组件 (Solr) 下一篇如何在没有无限循环的情况下在 React 的 useEffect 钩子中使用 window.open()？