1

我正在使用可以阅读polished哪些文档，这里是github repo。

在 JavaScript 中编写样式时，许多人需要 Sass 样式的辅助函数来提高工作效率。✨ Polish 将它们放在一个为 JavaScript 中的样式量身定制的漂亮、轻量级的包中。

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

通过将颜色与白色混合来着色。tint 会产生色调偏移，而 lighten 会操纵亮度通道，因此不会产生色调偏移。

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

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/poliished/blob/master/src/error/errors.md#5。

不幸的是，上面返回的是 a404 Error所以我看不到它说什么。

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

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

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

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

我知道（相信）这与我传递第二个参数的方式有关。我知道它需要一个字符串，我假设它没有收到一个字符串，但我不知道如何修复。

我在这里看到了这篇文章，但再次不确定这是否是我要找的。

任何帮助将不胜感激

4

2 回答 2

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

一个工作示例

于 2019-04-10T04:44:34.180 回答
0

尝试调用您的函数 (getMyColor()) 并查看响应，如果它不是字符串，则可以解决。

于 2019-03-20T09:50:53.760 回答