使用 material-ui Transitions 时如何修复“TypeError：无法读取未定义的属性“样式”错误

Question

I'm trying to use transitions within my react app, but each time I try to use any transition module this error comes up: "TypeError: Cannot read property 'style' of undefined",

(anonymous function) 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 | });

I've tried not using es6 class style method, which actually fixes the problem, but I want to use es6 classes.

I think it has something to do with the styles variable which I define at the top like so:

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

I expect the text inside the typography tag to Fade in, but the App crashes.

Answer 1

Fade the Typography component:

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

For example:

export default function App() {
  return (
    <FlexBox>
      <Fade in={true}>
        <Typography>Welcome</Typography>
      </Fade>
    </FlexBox>
  );
}