Chakra UI 使用经验

废话

最近做一个官网项目，UI定制化要求高，很明显不适合使用ant这样的后台UI库。我便在网上搜索适合react的C端UI库，经过比较，最终选择了chakra这个UI库。一开始并不顺利，我用往常的经验，安装、引入、照着文档使用，组件的显示和文档的demo不一致。由于是英文文档，我便没了耐心，卸载。又到网上找一找，发现还是没有很合适的，又安装了回来，重读文档。

悟

做难的事，做你没做过的事，不必担心不会做，做起来就会了。

Chakra UI 使用经验

version

@chakra-ui/react: 3.3.1

import { ChakraProvider } from "@chakra-ui/react";
import { createSystem, defaultConfig } from "@chakra-ui/react";

const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      colors: {
        primary: {
          value: "linear-gradient( 130deg, #F5752D 0%, #FF3B3B 100%)",
          red: { value: "#FF3B3B" },
        },
      },
    },
    recipes: {
      button: buttonRecipe,
    },
    slotRecipes: {
      dialog: dialogSlotRecipe,
    },
  },
});

const App = () => {
  return (
    <ChakraProvider value={system}>
      <RouterProvider router={router} />
    </ChakraProvider>
  );
};

recipes 和 slotRecipes 的定义在 github 查看

C端组件一般都需要封装一下才在业务中使用，因为它颗粒度很细，需要组装一下才能像ant那样方便的使用，如何封装可以参考 官方UI

variant

现在很多UI库都引入了variant的概念，其实可以把他理解为 更直接的 type

说明：
以下是ant中Button组件的type属性及其取值

以下是ant中Button组件的variant属性及其取值

variant 相较于 type 更加接近组件本身，用行话说就是颗粒度更细了。