Как исправить ошибку 'TypeError: Невозможно прочитать свойство' style 'of undefined', при использовании переходов Material-UI

Question

Я пытаюсь использовать переходы в своем приложении реакции, но каждый раз, когда я пытаюсь использовать какой-либо модуль перехода, возникает эта ошибка: «Ошибка типа: Не удается прочитать свойство 'style' of undefined",

(анонимная функция) 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);

Я ожидаю, что текст внутри типографского тега исчезнет, ​​но приложение вылетает.

Answer 1

Fade компонент Typography:

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

Например:

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