无法读取 Material UI 类答案

【问题标题】：Cannot read Material UI classes无法读取 Material UI 类
【发布时间】：2021-01-29 12:06:39
【问题描述】：

我使用 Material UI 运行一个 React 应用程序只是为了尝试一些东西。我尝试按照原始文档中解释的方式自定义组件，但应用了一些更改，因为在我的情况下我使用了类 insthead 的钩子，但我不知道为什么它一直显示错误：无法读取未定义的属性“根”。所以基本上就是这样，我的道具上似乎没有任何“类”，但我不知道为什么。任何的想法？（对不起，我的英语顺便说一句）

import React, { Component } from "react";
...
import { withStyles } from "@material-ui/core/styles";

import "./Product.css";

const useStyles = (theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
  },
});

export class Product extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isExpanded: false,
    };
  }

  render() {
    const { isExpanded } = this.state;
    const { classes } = this.props;
    debugger;
    return (
      <Container maxWidth="lg" className="full-container">
        <div className={classes.root}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <Paper className={classes.paper}>xs=12</Paper>
            </Grid>
          </Grid>
        </div>
        <Accordion
          expanded={isExpanded}
          onChange={() => this.setState({ isExpanded: !isExpanded })}
        >
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1bh-content"
            id="panel1bh-header"
          >
            <Typography className="heading">General settings</Typography>
            <Typography className="secondaryHeading">
              I am an accordion
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>
              Nulla facilisi. Phasellus sollicitudin nulla et quam mattis
              feugiat. Aliquam eget maximus est, id dignissim quam.
            </Typography>
          </AccordionDetails>
        </Accordion>
      </Container>
    );
  }
}

export default withStyles(useStyles)(Product);

谢谢！

【问题讨论】：

你能添加你所有的进口吗

标签： css reactjs material-ui

【解决方案1】：

此组件代码没有任何问题。
从这个文件中，您要导出两件事，一件名为 export App 类，另一件是使用 withStyles hoc 的默认导出。并且要使用useStyles，您需要导入此文件的默认导出。您可能导入了 import {App} from './App' 之类的组件，这就是您收到错误的原因。像这样导入默认导出，import App from './App'

【讨论】：

它醒了！！抱歉回复晚了，但我正忙于另一个项目。真的真的真的非常感谢！

【解决方案2】：

我在下面为你提供了工作代码。

我认为您的导入无效。您能否更新您的问题以包括您正在使用的进口产品。

我更改了手风琴中的图标并使用了以下导入

import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import {
  Container,
  Grid,
  Accordion,
  AccordionSummary,
  Typography,
  AccordionDetails,
  Paper
} from "@material-ui/core";

import { ExpandMoreOutlined } from "@material-ui/icons";

工作文件。

import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import {
  Container,
  Grid,
  Accordion,
  AccordionSummary,
  Typography,
  AccordionDetails,
  Paper
} from "@material-ui/core";

import { ExpandMoreOutlined } from "@material-ui/icons";

const styles = (theme) => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
});

export class Product extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isExpanded: false
    };
  }

  render() {
    const { isExpanded } = this.state;
    const { classes } = this.props;
    debugger;
    return (
      <Container maxWidth="lg" className="full-container">
        <div className={classes.root}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <Paper className={classes.paper}>xs=12</Paper>
            </Grid>
          </Grid>
        </div>
        <Accordion
          expanded={isExpanded}
          onChange={() => this.setState({ isExpanded: !isExpanded })}
        >
          <AccordionSummary
            expandIcon={<ExpandMoreOutlined />}
            aria-controls="panel1bh-content"
            id="panel1bh-header"
          >
            <Typography className="heading">General settings</Typography>
            <Typography className="secondaryHeading">
              I am an accordion
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>
              Nulla facilisi. Phasellus sollicitudin nulla et quam mattis
              feugiat. Aliquam eget maximus est, id dignissim quam.
            </Typography>
          </AccordionDetails>
        </Accordion>
      </Container>
    );
  }
}

export default withStyles(styles)(Product);

【讨论】：

【解决方案3】：

我可以使用您的代码 https://codesandbox.io/s/jovial-satoshi-lx7of?file=/demo.js:27-499 制作一个工作沙箱。我认为问题出在您导入其他 MUI 组件的位置，因为这是我修改的唯一位置（因为您没有提供完整的导入）。

【讨论】：