Next.js使用MUI报错Add the "use client" directive at the top of the file to use it.

在Next.js中使用MUI会报错：

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

import Button from "@mui/material/Button";

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

解决方法是加上"use client"标签，在import的上方加入，比如：

"use client"
import Button from "@mui/material/Button";

这里要导入的按钮正在使用客户端钩子，在本例中为 createContext。 为此，需要在文件顶部添加“use client”。 但这意味着该页面成为客户端组件，而不再是服务器组件了。