Material UI makeStyles inside a TSX Class Component

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>
        )
    }
}```

score 0 · Answer 1 · answered Dec 16 '19 at 08:10

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

Material UI makeStyles inside a TSX Class Component

1 Answers1