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

Question

无法找到如何通过 styled-components 使用 css 对象中的函数的清晰示例。它不会抛出错误，但在提取 props 时，背景不会添加到 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

要解决 Prop 提取问题，您应该能够执行以下操作:

// Simple color function
const color = (error) => {
  if (error) {
    return 'red';
  }
  return 'black';
};

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