Next.js开启AMP模式后引入Material UI组件报错如何解决？

出现该报错的核心原因是你当前使用的@material-ui/core版本默认样式注入逻辑和AMP规范不兼容：

• AMP规范强制要求所有自定义样式只能放在<head>标签内的<style amp-custom>标签中，不允许在<body>内部的任意位置（包括div、button等元素的内部或者同级位置）出现独立的<style>标签
• 未适配AMP场景的Material UI基础组件，默认会在渲染时将组件对应的样式封装为<style>标签，直接插入到组件DOM节点的相邻位置，也就是插入到了页面<body>内部，直接违反了AMP的样式规则，因此触发了Next.js的AMP校验报错。

内容的提问来源于stack exchange，提问作者Lieto Ahmad