Question

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

Answer 1

makeStyles返回react hook，因此您不能在Component中使用它。挂钩仅用于功能组件。使用Material-UI中的withStyles HOC。

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

TSX类组件内的材质UI makeStyles

1 个答案: