有样式的组件和波兰如何包括一个功能作为颜色？

Question

我使用样式-组件和抛光，以使颜色变暗/减轻。

下面是我现在工作的内容：

colors = ['#eee', '#ccc', '#ddd'];

const calcBorderColor = ({ currentPosition }) => {
  const color = colors[(currentPosition) % colors.length];
  return color;
};

const Choice = styled.button`
  border-color: ${calcBorderColor};
`;

我被困在这里：

&:hover {
    border-color: ${darken(0.1, calcBorderColor)};
}

悬停样式是Passed an incorrect argument to a color function, please pass a string representation of a color.中的错误

如何与calcBorderColor函数一起使用抛光暗光？

Answer 1

使用darken函数时只会收到错误，因为它需要一个字符串作为第二个参数，相反，您传递的是calcBorderColor的函数声明，如果对其进行记录，您可以看到如下所示：

calcBorderColor(_ref) {
    var currentPosition = _ref.currentPosition;

    var color = colors[currentPosition % colors.length];
    return color;
}

如果你：

console.log(typeof calcBorderColor);

您将得到它的类型函数。

这是因为polished库函数是通过使用流静态输入的。而且您不会在第一个border-color中得到错误，因为样式组件正在跳过以呈现函数声明，可能留下了按钮元素的默认border-color。

因此，您需要在对currentPosition函数的两个调用中传递一个具有属性calcBorderColor的对象作为参数，以便使其可用并避免该错误。

const Choice = styled.button`
  border-color: ${calcBorderColor({currentPosition: 1})};

  &:hover {
    border-color: ${darken(0.1, calcBorderColor({ currentPosition: 0}))};
  }
`;