material-ui Duplicated styles in Next.js

6tqwzwtp  于 6个月前  发布在  其他
关注(0)|答案(2)|浏览(66)

重复样式

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例: https://codesandbox.io/p/sandbox/brave-rosalind-skg4gj?file=%2Fpages%2Findex.js
我稍微修改了原始的 example,并使用 next.js 添加了 <Button color="success" sx={{ padding: "2px" }}>
步骤:

  1. 转到实时示例。
  2. 通过执行任务 build 并在之后执行 start 在生产模式下运行它。
  3. 在 DevTools 中检查该按钮。

当前行为 😯

样式被复制( border-radius , color ,3次 padding )。

预期行为 🤔

样式应该与没有重复项的组合。我使用 material-cra 创建了相同的 example。在 production 模式下运行它会导致干净的不重复的 css。

上下文 🔦

此 bug 导致重复的样式,从而增加了客户端下载的 css 大小。

你的环境 🌎

npx @mui/envinfo

Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
tp5buhyn

tp5buhyn1#

这是情感如何结合类别的方式,取决于是否使用了提取关键块(用于SSR)。如果您对此有任何疑问/问题,请在emotion的存储库中提出一个问题。

qrjkbowd

qrjkbowd2#

#33126中也有类似的报告。

相关问题