在 Next JS 中，Material UI 快餐栏无法正常工作

Posted 2023-02-23

【中文标题】在 Next JS 中，Material UI 快餐栏无法正常工作

【英文标题】：Material UI snackbars not working properly in Next JS

【发布时间】：2020-12-17 11:45:29

【问题描述】：

我正在尝试在 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 属性，它会显示但不能通过状态变量工作。

【问题讨论】：

如果您单击按钮，您不会收到任何错误？

沙盒会很有帮助

按钮点击没有错误。

【参考方案1】：

替换此行

return ...;

与

return (...);

除此之外，我的codesandbox 上的一切似乎都很好。

【讨论】：

只有 (...)。打字须

将有问题的代码添加到codesandbox，有NextJs模板。这样我们可以更快地找到问题。