Question

我正在使用polished，该书documentation可以在这里阅读，github在这里可以回购。

使用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

对此晚了晚了，但是您的问题是class _LoginFormState extends State<LoginForm> { String _username = ""; String __password = ""; void ToogleState( text){ setState(() { _username = text; }); } //Widget TextField( onChanged: (text){ToogleState( text); print(username);}, decoration: InputDecoration( hintText: 'input username', labelText: 'Username' ), ), }是一个函数，而getMyColor期望您所声明的字符串。我们不评估传递给任何颜色模块的功能，因此在传递tint时必须对其进行评估。所以类似这样：

getMyColor

A working example

Answer 2

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

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

2 个答案: