Я получаю эту ошибку при импорте пользовательского интерфейса Chakra

#javascript #html #css #chakra

#javascript #HTML #css #chakra-ui

Вопрос:

Я получаю эту ошибку при импорте пользовательского интерфейса Chakra.

    
   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");
  

Ответ №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" />