样式化组件在样式化对象中使用函数

Question

找不到一个清晰的例子，如何在 .css 对象中使用函数styled-components。它不会引发错误，但在提取道具时不会将背景添加到 CSS 输出中，如下例所示。

// Simple color function

const color = (error) => {

 if (error) {

   return 'red'

 }

 return 'black',

}

作品- css

const StyledInput = styled.input<InputProps>`

  background: ${({ error }) => color(error)};`;

工作- css 对象

const StyledInput = styled.input<InputProps>(props => ({

  background: color(), // !!! NEED error from props

}));

不工作- css 对象

const StyledInput = styled.input<InputProps>(props => ({

  background: `${({ error }) => color(error)}`,

}));

Answer 1

要解决道具提取问题，您应该能够这样做：// Simple color functionconst color = (error) => {&nbsp; if (error) {&nbsp; &nbsp; return 'red';&nbsp; }&nbsp; return 'black';};const StyledInput = styled.input<InputProps>(({ error, ...props }) => ({&nbsp; background: color(error),}));