导入 Chakra UI 时出现此错误答案

【问题标题】：I'm getting this error when I import Chakra UI导入 Chakra UI 时出现此错误
【发布时间】：2020-08-28 20:40:56
【问题描述】：

我在导入 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");

【问题讨论】：

标签： javascript html css chakra

【解决方案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" />

【讨论】：