0

如何在 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>
        )
    }
}```
4

1 回答 1

0

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);
于 2019-12-16T08:10:13.143 回答