javascript - 在 PolishedJS 中使用样式化 map

Question

我有以下 Styled-Map对象:

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

我在样式化组件中按如下方式使用它:

const MyComponent = styled.div`
  ...

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

这让我可以按如下方式使用我的组件:

<MyComponent primary />
<MyComponent secondary />

它会为背景颜色使用合适的颜色值。

到目前为止，还不错。

但现在我想使用 polished在悬停时使背景颜色变暗——像这样:

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

但这行不通。它会引发错误。

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

因此，我想知道是否有人对我如何将 styled-map 与 polished 结合使用有任何想法？

Answer 1

darken Returns a string value for the darkened color.

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 />;
};