我想在Next.js App Router中使用Mantine UI.

2 年 ago

文, 翔

1 minute

Mantine UI 是什么？

这是一个React的UI库。
像MaterialUI、ChakraUI这样的知名库，类似的东西。

作为特征，

在没有必要采用相对独特风格的管理界面等方面，此库非常易于使用。

請問？

Mantine UI 在其CSS in JS框架中采用了Emotion。据说，Mantine v7 alpha 不使用Emotion。

目前的App Router尚不支持Emotion。

所以如果不这样做，就不能使用它，所以必须在客户端指定进行css输出处理。

防控措施

在应用程序目录下创建以下文件。

'use client'

import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return styles
  })

  if (typeof window !== 'undefined') return <>{children}</>

  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>{children}</StyleSheetManager>
  )
}

接下来，修改位于app目录中的layout文件。

import StyledJsxRegistry from './registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

是的，这样就结束了。
如果进行上述的处理，我想在App Router上也能使用ManineUi！

总结

由于添加的处理方式，RSC将无法使用，所以与App Router的兼容性似乎不太好。
嗯，如果有人想个人尝试使用App Router和Mantine UI！请随便试试吧！
如果有任何问题或指导意见，请留言给我，我会很高兴的！

以上！ !)

以上！