gpt4 book ai didi

reactjs - 如何在React中使用Material UI组件

转载 作者:行者123 更新时间:2023-12-03 14:07:16 26 4
gpt4 key购买 nike

我是 React 和 Material UI 的新手,我不知道如何使用它们的组件和样式示例。我从文档中有这个卡片组件(以带有蜥蜴的卡片为例)

https://material-ui.com/demos/cards/

如何在我的类组件中使用它?如果我只复制渲染,它可以工作,但不会得到与示例相同的结果。这是什么?

ImgMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ImgMediaCard);

我尝试在线搜索,但找不到任何帮助

我的类(class)

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import SkipPreviousIcon from "@material-ui/icons/SkipPrevious";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import SkipNextIcon from "@material-ui/icons/SkipNext";
import Grid from "@material-ui/core/Grid";

export default class Serie extends Component {
constructor(props) {
super(props);

this.state = {
serie: this.props.serie
};
}

componentDidMount() {}

render() {
const { id, title, apiname, description, image, likes } = this.props.serie;
return (
<Grid item xs={4}>
<Card >
<div >
<CardContent >
<Typography component="h5" variant="h5">
{title}
</Typography>
<Typography variant="subtitle1" color="textSecondary">
Mac Miller
</Typography>
</CardContent>
<div>
<IconButton aria-label="Previous">
<SkipNextIcon />
</IconButton>
<IconButton aria-label="Play/pause">
<PlayArrowIcon />
</IconButton>
<IconButton aria-label="Next">
<SkipNextIcon />
</IconButton>
</div>
</div>
<CardMedia
image={image}
height="140"
title=" image"
/>
</Card>
</Grid>
);
}
}

最佳答案

首先是 props 类,它来自 withStyles hoc。 styles 是定义 CSS 样式的函数。因此,请确保正确导入所有内容。在 styles 变量中,它也可以是纯对象,这意味着它不必是函数。

// import statements

const styles = theme => ({
"myCustomClass": {
fontFamily: "Arial"
}
})

class App extends React.Component {
state = {
...
}

render () {
const { classes } = this.props;

return <div className={classes.myCustomClass}>My custom class</div>
}
}

export default withStyles(styles)(App);

关于reactjs - 如何在React中使用Material UI组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52872115/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com