styled-components css模板函数在函数内调用输出异常：插值错误、多余逗号

修复方案 #

你遇到的问题核心是错误调用了css辅助函数返回值的.toString()方法：css返回的是样式对象实例，不是纯静态字符串，手动序列化会丢失动态插值的处理逻辑，才会生成带多余逗号的无效样式。

直接移除所有.toString()调用，把css的返回值直接传给css prop即可，styled-components内置的编译器会自动完成样式注入、插值处理、theme属性读取的全流程逻辑：

const getCss = (color: string) => css<PropsWithTheme>`
  width: 100px;
  height: 100px;
  color: ${color};
`

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

如果需要组合多个css返回的样式，直接传入数组即可，不需要嵌套额外的css模板字符串，自然不会出现Prettier格式化后可读性差的问题：

// 基础样式
const baseCss = css<PropsWithTheme>`
  width: 100px;
  height: 100px;
`
// 动态颜色样式
const colorCss = (color: string) => css<PropsWithTheme>`
  color: ${color};
`
// 组合使用
const MyComponent = () => <div css={[baseCss, colorCss('red')]} />

注：你示例代码中的参数类型存在笔误，strinbg需要修正为string。

内容的提问来源于stack exchange，提问作者Michal Kurz