样式组件 - 将对象作为抛光的颜色函数的第二个参数传递

Question

我正在使用polished，documentation可以阅读，这里github repo在这里。

在JavaScript中编写样式时，许多人需要Sass风格的帮助函数才能提高工作效率。 ✨打磨为您带来一个漂亮，轻量级的包装，为JavaScript风格量身定制。

我正在使用tint函数，如何使用它的示例可以在上面的文档链接中找到：

通过将其与白色混合来着色。色调可以产生色调偏移，其中亮度操纵亮度通道，因此不会产生色调偏移。

我有一个主题对象存储我的所有颜色，它是这样的：

const object = {
  colors: {
    myDesiredColor: '#0000FF',
    ...otherColors
  },
};

然后我导出一些我打算重用的样式。如下所示：

export const containerStyles= css`
  color: ${tint(0.5, object.colors.myDesiredColor)};
  padding: 17px;
  margin-bottom: 10px;
  margin-top: 10px;
`;

但是我收到以下错误：

未捕获错误：发生错误。有关更多信息，请参阅https://github.com/styled-components/polished/blob/master/src/error/errors.md#5。

不幸的是，以上是返回404 Error所以我看不出它说什么。

我遇到了enter link description here这个stackoverflow的帖子，它确实有用，但它不是我想要的，因为我也在其他地方使用这种方法，并且不适合在那些情况下使用。所以理想情况下我只想在提取主题对象颜色后传入一个变量。

const getMyColor = ({ object }) => object.colors.myDesiredColor;

export const containerStyles= css`
  color: ${tint(0.5, getMyColor)};
  padding: 17px;
  margin-bottom: 10px;
  margin-top: 10px;
`;

以上是理想的我想要的。这样我就可以在其他用例中轻松调用它。但我得到了同样的错误。

我知道（相信）它与我在第二个论点中传递的方式有关。我知道它需要一个字符串，我假设它没有收到字符串，但我不知道如何解决。

我发现了这篇文章，here，但又不确定这是否是我正在寻找的。

任何帮助将不胜感激

Answer 1

在这方面超级晚了，但你的问题是getMyColor是一个功能，tint正在期待你所说的字符串。我们不评估传递给任何颜色模块的函数，因此在传递时必须评估getMyColor。所以像这样：

const getMyColor = ( object ) => object.colors.myDesiredColor;

export const containerStyles= css`
  color: ${tint(0.5, getMyColor(myTheme)};
  padding: 17px;
  margin-bottom: 10px;
  margin-top: 10px;
`

A working example

Answer 2

尝试调用你的函数（getMyColor（））并查看响应，如果它不是字符串，则有你的修复。