material-ui 写轮播图
时间: 2023-09-02 11:09:45 浏览: 99
要使用 material-ui 写轮播图,你可以使用 Carousel 组件。下面是一个简单的示例:
```jsx
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
const useStyles = makeStyles(theme => ({
root: {
maxWidth: 600,
margin: 'auto',
},
}));
const CarouselComponent = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<Carousel>
<div>
<img src="https://picsum.photos/600/400/?image=0" alt="carousel" />
</div>
<div>
<img src="https://picsum.photos/600/400/?image=1" alt="carousel" />
</div>
<div>
<img src="https://picsum.photos/600/400/?image=2" alt="carousel" />
</div>
</Carousel>
</div>
);
};
export default CarouselComponent;
```
在上面的代码中,我们首先导入了 `Carousel` 组件,并且引入了 `react-responsive-carousel` 的样式。然后我们使用 `makeStyles` 创建一个样式对象,并在组件中使用它。最后,我们在 `Carousel` 组件中添加了三个 `div`,每个 `div` 中都包含一个图片。你可以按照自己的需求来修改这些内容。
注意:在使用 `Carousel` 组件之前,你需要先安装 `react-responsive-carousel` 包。你可以使用以下命令进行安装:
```
npm install react-responsive-carousel
```