将 Styled-Map 与 PolishedJS 一起使用答案

【问题标题】：Using Styled-Map with PolishedJS将 Styled-Map 与 PolishedJS 一起使用
【发布时间】：2020-02-09 00:06:37
【问题描述】：

我有以下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 与抛光结合使用有任何想法？

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案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 />;
};

【讨论】：