使用 material-ui Transitions 時如何修復“TypeError：無法讀取未定義的屬性“樣式”錯誤

Question

我正在嘗試在我的 React 應用程序中使用轉換，但是每次我嘗試使用任何轉換模塊時都會出現此錯誤：“TypeError：無法讀取未定義的屬性‘樣式’”，

(匿名函數) 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

淡化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>
  );
}