material-ui 写轮播图
时间: 2023-12-11 08:02:00 浏览: 29
要使用 Material-UI 写一个轮播图,你可以使用它的组件 `Carousel`。下面是一个简单的例子:
```jsx
import React from 'react';
import { Carousel } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
carousel: {
height: 400,
width: '100%',
backgroundColor: '#ccc',
},
image: {
height: '100%',
width: '100%',
objectFit: 'cover',
},
});
const images = [
{
url: 'https://picsum.photos/800/400',
title: 'Image 1',
},
{
url: 'https://picsum.photos/800/401',
title: 'Image 2',
},
{
url: 'https://picsum.photos/800/402',
title: 'Image 3',
},
];
const App = () => {
const classes = useStyles();
return (
<Carousel className={classes.carousel}>
{images.map((image) => (
<img key={image.url} src={image.url} alt={image.title} className={classes.image} />
))}
</Carousel>
);
};
export default App;
```
在这个例子中,我们使用 `Carousel` 组件来创建一个轮播图,将每张图片作为子组件传递给 `Carousel`。我们还使用了 `makeStyles` 来创建样式,并将它们应用于 `Carousel` 和图片。