Использование Styled-Map с PolishedJS

Question

У меня есть следующий Styled-Map объект:

export const colorProps = styledMap({
  default: yellow,
  primary: blue,
  secondary: green,
})

Я использую его следующим образом в Стилизованном компоненте:

const MyComponent = styled.div`
  ...

  background-color: ${colorProps};
  ...
`

Это позволяет мнеиспользовать мой компонент следующим образом:

<MyComponent primary />
<MyComponent secondary />

И он будет использовать соответствующее значение цвета для цвета фона.

Пока все хорошо.

Но теперь я хотел бы использовать полированный , чтобы затемнить цвет фона при наведении - что-то вроде этого:

&:hover {
  background-color: ${darken(0.1, colorProps)};
}

Но это не работает. Выдает ошибку.

Error: Passed an incorrect argument to a color function, please pass a string representation of a color.

Поэтому мне интересно, если у кого-нибудь есть какие-либо идеи о том, как я могу использовать style-map в сочетании с polished?

Answer 1

darken Возвращает строковое значение для затемненного цвета.

darken(amount: (number | string), color: string): string

В качестве второго аргумента,вам нужно передать string, где colorProps в вашем случае - function.

Поэтому передайте объект props из styled-components в colorProps:

const COLORS = {
  default: 'yellow',
  primary: 'blue',
  secondary: 'green'
};

const colorProps = styledMap(COLORS);

const FlexBox = styled.div`
  background-color: ${props => darken(0.1, colorProps(props))};

  // border: 30px solid ${props => colorProps(props)};
  border: 30px solid ${colorProps};
  height: 100px;
`;

const App = () => {
  return <FlexBox secondary />;
};