Nuxt+ Responsive grid [Vue warn]: Hydration style mismatch on

[hb0730]

描述错误

在最新的nuxt中使用 Responsive grid存在一下问题

entry.js:55 [Vue warn]: Hydration style mismatch on 

  - rendered on server: style="display:;grid-column:span NaN / span NaN;margin-left:;"
  - expected on client: style="display:;grid-column:span 1 / span 1;margin-left:;"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <GridItem privateSpan=1 privateOffset=0 > 
  at <Grid cols="md:1 lg:4" x-gap=12 y-gap=12  ... > 
  at <ConfigProvider breakpoints= 
{xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, …}
 > 
  at <App key=3 > 
  at <NuxtRoot>

复现步骤

在最新复现中打开浏览器控制台即可复现

最小复现链接

https://codesandbox.io/p/devbox/nuxt-naiveui-grid-fytfhg

系统信息

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 135.59 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/Applications/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.22 - ~/Applications/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 9.5.1 - ~/Applications/.nvm/versions/node/v18.16.1/bin/npm
    pnpm: 8.10.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.2.1
  npmPackages:
    naive-ui: ^2.34.3 => 2.38.2 
    vue: ^3.4.27 => 3.4.27

使用的包管理器

pnpm

验证

• [X] 阅读 贡献指南。
• [X] 阅读 文档。
• [X] 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• [X] 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• [X] 提供的复现是最小可复现的示例。

[jahnli]

https://www.naiveui.com/zh-CN/os-theme/docs/ssr#%E6%B3%A8%E6%84%8F https://www.naiveui.com/zh-CN/os-theme/docs/nuxtjs

看看是否可以解决

[hb0730]

好像是ssr导致的问题，如果使用<ClientOnly>好像没问题，但是所有的@css-render/* 和 css-render都是0.15.14