Material UI makeStyles inside a TSX Class Component - reactjs

Question

How can I make use of the Material UI styling options inside of a TSX class-component?
Due to the Typed Props and State I can't seem to figure out how to do it.
My Code below throws an "Invalid hook" error in side the componentWillMount method, where I try to load the created styles in to my component state.
How would you go about using the Material UI makeStyles method in a TSX component?
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>
)
}
}```

Answer 1

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);