Avatar

Hajeekn

Chakra UI 与 Next.js

2023-05-12

好久都没写博客了捏，今天逛 GitHub 的时候从推荐中发现了个 Chakra UI

这 Star 太恐怖了（

image-20230512185750376

看这样式挺好看的,准备给博客改造一下~

因为我博客是 Next.js

所以就直接跟着文档走了

首先是安装

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

安装过后需要先注册 ChakraProvider

把 /pages/_app.jsx 改成这样就行

不同的人需求不同,盲目复制粘贴只会疯狂报错 
import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp;

除此以外，我们还需要对文章渲染页面做些更改

这里我以 next-mdx-remote 做演示

根据 vscode 的提示

我们只需要增加一些组件即可

// Plugin, Plugin2 请替换成所需要的组件
	import { Plugin, Plugin2 } from '@chakra-ui/react';

	<MDXRemote
          components={
			// 此处以 {xx: xx} 的格式引入组件
            {Plugin: Plugin, Plugin2: Plugin2}
          }
    />

增加组件之后,我们就可以在 .md 或 .mdx 文件中使用组件了

以 Alert 为例

Chakra UI 也有着许多其他组件

像 Tooltip

更多的组件和用法,就请各位自行去官网查看吧

Compoents - Chakra UI