Как использовать компонент Material UI в React
Я новичок в реагировании на Material UI, и я не могу понять, как использовать их компоненты с их стилями, например. У меня есть этот компонент карты из документации (возьмем, например, карту с ящерицей)
https://material-ui.com/demos/cards/
Как мне использовать его в своем компоненте класса? Если я копирую только рендер, он работает, но не дает того же результата, что и в примере. Что это?
ImgMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ImgMediaCard);
Я пробовал искать в Интернете, но не могу понять, любая помощь приветствуется
Мои занятия
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>
);
}
}
Я задаю вопрос?
В чем собственное отличие от примера? Можете поделиться скриншотами? И для решения код, который вы используете - Как вы используете карту в рендере? Какой стиль вам придают?
В этом примере нет большой разницы, но я не могу понять, как это работает
Ответы 1
Прежде всего, это 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);
Отличный материал, но как мне создать экземпляр компонента, стилизованного таким образом, в другом файле .js? Кажется, нигде не найду такого примера.
Ааа .. Что ты имеешь в виду? Вы хотите использовать один и тот же стиль для разных компонентов? Если это вопрос, может быть, вы хотите создать функцию в отдельном файле, который возвращает объект стиля, и импортировать его в нужный компонент? Если вопрос не в этом, не могли бы вы предоставить более подробную информацию.
Оказывается, я совершенно неправильно понял синтаксис «экспортировать по умолчанию с помощью стилей (стилей) (приложение);» ха-ха. Я думал, что для использования компонента нужно вызвать функцию с параметром стиля. Я не понимал, что вы можете использовать компонент одинаково, независимо от подхода к стилю высокоуровневых компонентов или хуков. Я не использовал JS пару лет и не узнал некоторые элементы синтаксиса. Приносим извинения за недоразумение - этот пример отлично работает!
@ThePartyTurtle рада, что это помогло :)
Как выглядит твой класс?