如何修复'TypeError：使用Material-UI过渡时无法读取未定义的属性'style'错误

我试图在我的应用程序中使用过渡，但是每次尝试使用任何过渡模块时，都会出现此错误：“ TypeError：无法读取未定义的属性'style'，

（匿名函数）node_modules/@material-ui/core/esm/Fade/Fade.js：83

  80 |     style: _extends({
  81 |       opacity: 0,
  82 |       visibility: state === 'exited' && !inProp ? 'hidden' : undefined
> 83 |     }, styles[state], style, children.props.style),
     | ^  84 |     ref: handleRef
  85 |   }, childProps));
  86 | });

我尝试过不使用es6类样式方法，该方法实际上可以解决问题，但是我想使用es6类。

我认为这与我在顶部定义的样式变量有关，如下所示：

const styles = theme => ({
    typography: {
        marginTop: theme.spacing(2)
    }
});

class IndexPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
        }
    }

    render() {
        const {classes} = this.props;

        return (
            <React.Fragment>
                <Typography className={classes.typography} align={"center"} variant={"h2"} component={"h2"}>
                    <Fade in={this.state.checked}>
                        Welcome to my Portfolio!
                    </Fade>
                </Typography>
            </React.Fragment>
        )
    }
}

IndexPage.propTypes = {
    styles: PropTypes.object.isRequired,
};

export default withStyles(styles)(IndexPage);

我希望版式标记中的文本会淡入，但应用程序崩溃。