如何使用打字稿和情感修复 Box 组件上的“属性“颜色”类型不兼容”

Posted 2023-03-16

【中文标题】如何使用打字稿和情感修复 Box 组件上的“属性“颜色”类型不兼容”

【英文标题】：How to fix 'Types of property 'color' are incompatible' on Box component using typescript and emotion

【发布时间】：2020-12-17 13:29:32

【问题描述】：

我正在尝试在一个新项目上制作一个通用的Box react 组件。这将是所有其他组件的基础。我正在使用 styled-system、emotion 和最终的 theme-ui 来处理我所有组件的主题化和样式化。

我的根 Box 组件如下所示：

import styled from '@emotion/styled';
import 
  compose,
  space,
  layout,
  flexbox,
  border,
  position,
  color,
  SpaceProps,
  ColorProps,
  LayoutProps,
  FlexboxProps,
  BorderProps,
  PositionProps,
 from 'styled-system';

export type BoxProps = SpaceProps &
  ColorProps &
  LayoutProps &
  FlexboxProps &
  BorderProps &
  PositionProps;

export const Box = styled.div<BoxProps>(
  
    boxSizing: 'border-box',
    minWidth: 0,
  ,
  compose(space, color, layout, flexbox, border, position)
);

我正在使用样式函数以及样式系统中的相关类型来创建一个 Box 组件，该组件接受空间、颜色、布局、弹性框、边框和位置道具。

我遇到的错误仅发生在 color 道具上。一旦我删除它，我就不会收到任何错误。

TS 错误是：

Type 'BoxProps' does not satisfy the constraint 'Pick<Pick<DetailedhtmlProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">, "color">'.
  Types of property 'color' are incompatible.
    Type 'string | number | symbol | (string | number | symbol | null)[] |  [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined;  | null | undefined' is not assignable to type 'string | undefined'.
      Type 'null' is not assignable to type 'string | undefined'.ts(2344)

这似乎只是从样式组件转移到情感时才会出现的问题，所以我不确定我是否缺少正确利用情感类型的东西？

【问题讨论】：

你找到答案了吗？

@AlexanderKaran - 不，我必须继续前进，所以我只是从 theme-ui 导入 BoxProps 并将这些类型（空间和颜色）与我从 styled-system 导入的类型结合起来。如果您需要，我可以发送我的解决方法。

感谢您的回复，我遇到了同样的错误，但是对于位置属性，我使用强制转换修复了它：position: "fixed" as "fixed" 但是，我仍然找不到您或我的错误发生的原因；应该没问题吧。

【参考方案1】：

如果您对“type”和“as”类型有错误，您应该在将它们插入样式组件之前重新定义这些类型。也许，如果你尝试重写你的道具，它会有所帮助。我的例子：

/* Button component */
const Button: React.FC<ButtonProps> = (
  isLoading,
  children,
  // should redefine this types, because React.HTMLProps<HTMLButtonElement> has incompatible similar types
  type = 'button',
  as = undefined,
  ...props
: ButtonProps, ...others) => 
  return (
    <StyledButton ...props ...others>
      isLoading ? 'Loading...' : children
    </StyledButton>
  );
;

export default Button;