0

编辑：其实我错了，第一个例子也行不通！它还插入代码！

我正在尝试使用styled-components css prop api，但遇到了以下问题：

此代码运行良好：

const myCss = css<PropsWithTheme>`
  width: 100px;
  height: 100px;
  color: ${props => props.theme.color};
`

const MyComponent = () => <div css={myCss.toString()} />

但以下没有：

const getCss = (color: strinbg) => css<PropsWithTheme>`
  width: 100px;
  height: 100px;
  color: ${color}; // I tried injecting the color directly
  color: ${() => color}; // And also returning it from a callback inside the css``, just as I would access props/theme
`

const MyComponent = () => <div css={getCss('red').toString()} />

这里的输出 css 是width: 100px; height: 100px; color: ,red,; ,() => color,;，这显然是无效的。

使用模板字符串插值对输出进行字符串化可以解决问题，但由于 Prettier 强制执行此格式，导致可读性非常差：

const MyComponent = () => (
  <div
    css={`
      ${getCss('red')}
    `}
  />
)

不幸的是，将插值移动到 css 道具定义之外的任何地方（在组件主体中或创建字符串化函数）会破坏功能（道具/主题访问，所有 css 根本不会被应用）。

它似乎与这个问题有关：https ://github.com/styled-components/styled-components/issues/1641 ，但建议的解决方案是使用css我已经在做的帮助函数:(

我的问题有简单的解决方法吗？

4

0 回答 0