javascript - 如何使用材质 UI 默认组件
问题描述
我一直在使用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
我对错误一无所知。我希望有人帮我指出我做错了什么以及如何消除它
解决方案
尝试删除node_modules
和package-lock.json
或yarn/lock
重新安装
推荐阅读
- angular - 解决ios中cordova firebase和google登录不兼容的问题
- javascript - 如何使用 Jest 测试 mongoose.connect 回调方法
- excel - 如何解决计算学生等级(例如 11 年级)的问题
- c# - 将项目分组到数组列表的最简单方法
- ruby-on-rails - 如何将 unix 时间戳与 ActiveSupport::TimeWithZone 进行比较?
- python - 有没有办法用长度可能不是大列表长度的整数倍的较小列表中的元素填充大列表?
- octave - 如何在 GNU Octave 5.1.0 中集成符号变量的功能
- java - “缺少所需的请求正文:public org.springframework.http.ResponseEntity
- javascript - Invalid character in IE
- ajax - 如何使用 ajax 填充 Kendo.ComboBox?