实质性的UI快餐栏在Next JS中无法正常工作

Question

我正在尝试在NextJS中使用Material UI组件，但是它们无法正常工作。

import React, { Component } from "react";

// MATERIAL
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";

export default class NewProduct extends Component {
  constructor() {
    super();
    this.state = {
      testSnack: false,
    };
  }

 testSnackbars = () => {
    this.setState({ testSnack: true });
 };

  render(){
     return{
       <>
       <Snackbar
      open={this.state.testSnack}
      autoHideDuration={5000}
      onClose={this.handleClose}
    >
      <MuiAlert
        elevation={6}
        variant="filled"
        onClose={this.handleClose}
        severity="success"
      >
        Product Added!
      </MuiAlert>
    </Snackbar>

      <button onClick={this.testSnackbars}>
        Save
      </button>
    </>
    }
  }
}

这是在单击按钮时显示小吃栏的简单逻辑，但这在NextJs中似乎不起作用，我在ReactJs中非常频繁地使用Material，但这从未发生过。有人可以告诉我我在做什么错吗？

我无法使用自己的状态运行小吃店。如果我传入open = {true}属性，它将显示出来，但无法通过状态变量进行操作。

Answer 1

替换此行

return {...};

使用

return (...);

除此之外，我的codesandbox上的所有内容看起来都很不错。