案例代码初始化配置 - 图1

    npm i @chakra-ui/core@next

    案例代码初始化配置 - 图2

    克隆主题

    npx chakra-cli init —theme

    npm install @chakra-ui/theme

    案例代码初始化配置 - 图3

    配置chakra

    案例代码初始化配置 - 图4

    npm i react-icons @emotion/core @emotion/styled

    案例代码初始化配置 - 图5

    让react项目支持css属性

    npm i @emotion/babel-preset-css-prop —save-dev

    案例代码初始化配置 - 图6

    配置babel需要扩展next原有的babel

    .babelrc

    案例代码初始化配置 - 图7

    npm run dev 启动项目