如何解决如何使用打字稿和情感在Box组件上修复``属性'颜色'的类型不兼容''
我正在尝试在新项目上使用通用的Box
React组件。这将是所有其他组件的基础。我正在使用样式化的系统,情感以及最终的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,position)
);
我正在使用样式函数及其来自样式系统的相关类型,以创建一个Box组件,该组件接受空间,颜色,布局,flexBox,边框和位置道具。
我得到的错误仅在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)
这似乎只是从样式组件转换为情感时的一个问题,因此我不确定是否缺少某些东西来正确利用情感的类型?
解决方法
如果“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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。