Next.js中使用styled-components刷新页面样式消失

在Next.js中，使用styled-component进行样式设置，在初始化页面时样式显示完整，当对无更新页面再次进行手动刷新时，样式消失并出现如下警告：

解决办法

1、安装 babel-plugin-styled-components
npm install babel-plugin-styled-components -S
2、配置
在项目根目录下创建一个 .babel 文件 ，并进行以下配置

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",{ "ssr":true }
    ]
  ]
}

3、重启项目

此时，刷新无更新页面，样式依然存在，警告消失，问题解决！