扩展Chakra UI主题时多部分组件样式键名查找方法

多部分（复合）组件的合法样式挂载键名不需要靠论坛搜索或者猜测，有两个100%准确的获取路径：

• 本地依赖源码查询：所有Chakra UI多部分组件都会在模块导出时静态声明parts数组，数组内的字符串就是全部可用的样式键名。你在node_modules中查找时，进入@chakra-ui目录下对应组件包的dist入口文件，就能直接看到完整的键名列表，没有遗漏。
• 官方文档组件主题页查询：每个组件文档下的「Theming」板块，会在自定义示例前明确列出该组件支持的所有样式part，之前没找到大概率是停留在组件基础用法页，没有切换到主题定制标签。

你需要定制的两个常用组件，可用样式键名如下：

• 文本输入框（Input）：核心键名包括addon（输入框前后附加文本/容器）、field（输入框本体）、element（输入框前后挂载的图标/自定义元素区域）
• 下拉选择组件（Select）：核心键名包括root（组件最外层容器）、field（选择框本体）、icon（下拉箭头图标区域）

你问题中给出的Checkbox自定义主题写法完全符合规范，该组件的合法键名就是你用到的label、icon、control、container四个，和官方定义完全一致，参考写法如下：

export const Checkbox = {
  baseStyle: (props) => ({
    label: {
      color: "black",
      fontWeight: "bold",
    },
    icon: {
      color: "white",
      backgroundColor: "mainPurple",
    },
    control: {
      backgroundColor: "white",
    },
    container: {
      bg: "lightGray",
      p: 3,
      w: "100%",
      _hover: { bg: "mainPurpleTransp25" },
    },
  }),
};

额外说明：开发环境下如果写了不存在的样式键名，Chakra UI会直接在控制台抛出警告，提示当前组件不支持该part，可以用来快速排查拼写错误。

内容的提问来源于stack exchange，提问作者Dan Black