С помощью Styled Components и Polish, как включить функцию в качестве цвета?

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

Вы получите его типа function .

Это происходит потому, что polished библиотечные функции статическинабирается с помощью Flow .И вы не получите сообщение об ошибке в первом border-color, потому что Styled Components пропускает визуализацию объявления функции, вероятно оставляя значение по умолчанию border-color элемента button.

Таким образом, вам нужно передать в качестве аргумента объект с атрибутом currentPosition в обоих вызовах функции calcBorderColor, чтобы сделать его пригодным для использования и избежать этой ошибки.

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

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