如何使用Material UI默认组件

Question

我一直在使用bootstrap，我发现material ui也是一个很好的框架，并决定也开始学习如何使用它。在进入 MUI 组件时我陷入了困境。我想知道如何在不自定义的情况下使用默认的 MUI 组件。例如，我想复制card component并将其输出到浏览器上。

例如，其中一份文档的代码是：

import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { Button, CardActionArea, CardActions } from '@mui/material';

export default function MultiActionAreaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardActionArea>
        <CardMedia
          component="img"
          height="140"
          image="/static/images/cards/contemplative-reptile.jpg"
          alt="green iguana"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
      </CardActions>
    </Card>
  );
}

在尝试在浏览器上输出相同的组件时，我这样做：

import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const DefaultCard = () => {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        component=""
        alt="Yes"
        height="140"
        image=""
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Lizards are a widespread group of squamate reptiles, with over 6,000
          species, ranging across all continents except Antarctica
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

export default DefaultCard

但是，我不断收到以下错误

Error in ./~/@mui/material/node/ButtonBase/TouchRipple.js
Module parse failed: C:\dev\frontend\node_modules\@mui\material\node\ButtonBase\TouchRipple.js Unexpected token (257:46)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (257:46)
 @ ./~/@mui/material/node/ButtonBase/ButtonBase.js 34:42-66

Error in ./~/@mui/material/node/styles/createTransitions.js
Module parse failed: C:\dev\frontend\node_modules\@mui\material\node\styles\createTransitions.js Unexpected token (58:40)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (58:40)
 @ ./~/@mui/material/node/styles/createTheme.js 29:48-78

我对这个错误一无所知。我希望有人能帮我指出我的错误以及如何消除它

Answer 1

尝试删除node_modules或package-lock.json重新yarn/lock安装