reactjs - TSX 类组件中的 Material UI makeStyles
问题描述
如何在 TSX 类组件中使用 Material UI 样式选项?由于类型化的道具和状态,我似乎无法弄清楚如何去做。下面的代码在 componentWillMount 方法中抛出“无效挂钩”错误,我尝试将创建的样式加载到我的组件状态中。您将如何在 TSX 组件中使用 Material UI makeStyles 方法?
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { IShowMinimal } from "../../interface/show.minimal";
interface IShowCardProps {
show: IShowMinimal
}
interface IShowCardState {
materialUIclasses: any
}
const useStyles = makeStyles({
card: {
maxWidth: 345,
},
media: {
height: 140,
},
});
export class ShowCard extends Component<IShowCardProps, IShowCardState> {
constructor(props: IShowCardProps) {
super(props);
console.log("hi");
this.state = {
materialUIclasses: {}
}
console.log("Show", this.props.show);
}
componentWillMount() {
this.setState({
materialUIclasses: useStyles({})
});
}
render(): JSX.Element {
return (
<article>
<Card>
<CardActionArea>
<CardMedia
className={this.state.materialUIclasses.media}
image={this.props.show.image}
title={`Thumbnail for the show ${this.props.show.name}`}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{this.props.show.name}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</article>
)
}
}```
解决方案
makeStyles
returns react hook, so you can't use it inside Component
. Hooks are only for functional components. Use withStyles
HOC from material-UI.
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { IShowMinimal } from "../../interface/show.minimal";
interface IShowCardProps {
show: IShowMinimal,
classes: any
}
interface IShowCardState {
materialUIclasses: any
}
const styles = {
card: {
maxWidth: 345,
},
media: {
height: 140,
},
};
class ShowCard extends Component<IShowCardProps, IShowCardState> {
constructor(props: IShowCardProps) {
super(props);
this.state = {
materialUIclasses: {}
}
}
render(): JSX.Element {
return (
<article>
<Card>
<CardActionArea>
<CardMedia
className={this.props.classes.media}
image={this.props.show.image}
title={`Thumbnail for the show ${this.props.show.name}`}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{this.props.show.name}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</article>
)
}
}
export default withStyles(styles)(ShowCard);
推荐阅读
- html - 如何在顺风CSS中只制作占位符斜体?
- github - 如何在使用我的 github 帐户 libked 的 Web 应用程序上反映我的 github 提交
- c# - 如何将枚举泛型类型的变量转换为 int 并返回
- r - 有条件地更新列中信息的更好方法
- flutter - Dart 2.12 中以前使用带有 runtimeType 的 switch 的可能性是什么?
- sql - 删除列的实体框架代码第一次迁移问题
- progressive-web-apps - 同一主机上的多个 PWA,但端口不同 - 相同的来源行为
- ruby-on-rails - Ruby on Rails:具有现有对象的嵌套表单
- python - 为什么我需要将 python 协程包装到任务中/何时使用任务或协程?
- java - iText 7 Android 图片从相机或画廊到 pdf