Next.js+Chakra UI中button.ts样式类型错误及解决方法

在使用Next.js、TypeScript和Chakra UI开发项目时，按钮主题文件button.ts中baseStyle对象内的borderRadius、color、border属性出现类型错误：

Type 'string' is not assignable to type 'SystemStyleObject | undefined'

相关代码如下：

import { ComponentMultiStyleConfig } from "@chakra-ui/theme";

export const Button: ComponentMultiStyleConfig = {
    baseStyle: {
        borderRadius: "60px",
        color: "brand.100",
        border: "2px solid red",
    },
};

该错误导致样式无法同步到主文件，最终找到解决方案：在Chakra UI v2.4.9版本中，需使用useMultiStyleConfig替代ComponentMultiStyleConfig，替换后问题已解决。

内容的提问来源于stack exchange，提问作者Sahil Halbe