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

Question

找不到一个清晰的例子，如何在 .css 对象中使用函数styled-components。它不会引发错误，但在提取道具时不会将背景添加到 CSS 输出中，如下例所示。// Simple color functionconst color = (error) => { if (error) {   return 'red' } return 'black',}作品- cssconst 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 function

const color = (error) => {

  if (error) {

    return 'red';

  }

  return 'black';

};

const StyledInput = styled.input<InputProps>(({ error, ...props }) => ({

  background: color(error),

}));