如何在样式组件之间共享依赖于道具的样式？

Question

我有两个具有完全相同样式的样式化组件：输入和文本区域。我必须将它们分开，因为我必须编写style.input或styled.textarea，此处（可悲地）不允许使用条件。

因此，我编写了一个具有css样式的const，并将其发送到两个组件。它运作良好，但Typescript却发疯了：确实，css样式取决于许多道具以适应其输出。该如何解决？

错误是：

类型'ThemedStyledProps '不存在属性'size'

const inputStyle = css`
  line-height: ${(props) => SIZES[props.size].height}px;
  padding: 0 ${(props) => SIZES[props.size].padding}px;
  border-radius: ${(props) => SIZES[props.size].radius}px;
  text-overflow: ellipsis;
  opacity: ${(props) => props.disabled && 0.5};
  width: 100%;
  box-sizing: border-box;
  ::placeholder {
    opacity: 0.7;
  }
  ${(props) => VARIANTS[props.variant]};
  ${({ hasError }) =>
    hasError &&
    css`
      box-shadow: 0 0 0 2px red inset;
      background-color: transparent;
    `}
`;

const Input = styled.input<{
  size: Size;
  variant: Variant;
  disabled: boolean;
  hasError?: boolean;
}>`
  ${inputStyle}
`;

const TextArea = styled.textarea<{
  size: Size; 
  variant: Variant;
  disabled: boolean;
  hasError?: boolean;
}>`
  ${inputStyle}
`;