Styled Components - 将对象作为 color 函数的第二个参数从 polished 传递

Question

我在这里使用 polished 的 documentation can be read about and here github 回购协议。

When writing styles in JavaScript, many people need Sass-style helper functions to be productive. ✨ polished brings them to you in a nice, lightweight package tailor-made for styles in JavaScript.

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

Tints a color by mixing it with white. tint can produce hue shifts, where as lighten manipulates the luminance channel and therefore doesn't produce hue shifts.

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

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

但我收到以下错误：

Uncaught Error: An error occurred. See https://github.com/styled-components/polished/blob/master/src/error/errors.md#5 for more information.

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

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

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

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

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

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

我遇到过这个 post、here，但再次不确定这是否是我要找的。

如有任何帮助，我们将不胜感激

Answer 1

尝试调用您的函数 (getMyColor()) 并查看响应，如果它不是字符串，则有您的修复方法。

Answer 2

晚会在这方面太迟了，但您的问题是 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

Styled Components - 将对象作为 color 函数的第二个参数从 polished 传递

Styled Components - passing object as second argument for colour function from polished

reactjs

styled-components

css-in-js