导入Chakra UI时出现此错误

Question

当我导入Chakra UI时，我得到了这个错误。

   if (variantColorIsDefined) {
      var variantColorExists = variantColor in theme.colors; // If variant color exists in theme object
       ^  114 | 
    if (!variantColorExists) {
      console.warn("You passed an invalid variantColor to the " + label + " Component. Variant color values must be a color key in the theme object that has '100' - '900' color values. Check http://chakra-ui.com/theme#colors to see possible values");

Answer 1

从文档中很难理解这一点，变种颜色实际上是一组颜色。

在你的主题中，你需要定义一个颜色和一个相应的:hover值，例如：

yellow: {
  500: "#FFFF80",  //this is the default color
  600: "#FFFF00"   //this is the color on hover
},

然后在组件中引用它，如下所示：

<IconButton size="sm" icon="unicorn" isRound variantColor="yellow" />