在TypeScript中使用styled()修改材质UI列表组件

y4ekin9u  于 2023-03-24  发布在  TypeScript
关注(0)|答案(1)|浏览(125)

我正尝试将一个项目从JavaScript移植到TypeScript,但遇到了一部分代码,其中使用style()创建了Material UI的List组件的修改版本。我面临的问题是,当我尝试将其与属性“component”一起使用时,TypeScript会抱怨它没有这样的属性。我想我需要进行某种类型Assert,但我不确定
代码如下所示:

样式列表

const StyledList = styled(List)<ListProps>({
  '& .MuiListItemButton-root': {
    paddingLeft: 24,
    paddingRight: 24,
  },
  '& .MuiListItemIcon-root': {
    minWidth: 0,
    marginRight: 16,
  },
  '& .MuiSvgIcon-root': {
    fontSize: 20,
  },
});

利用它

<StyledList component="nav" disablePadding>
</StyledList>

错误

键入“{子项:(元素|int [];component:string;disablePadding:“true; }"不能赋值给类型”IntrinsicAttributes & { children?:ReactNode; class?:部分|undefined; dense?:布尔|undefined; disablePadding?:布尔|undefined; subheader?:ReactNode; sx?:SxProps<...>|undefined; } & CommonProps & Omit<...>& MUIStyledCommonProps<...>'。类型“IntrinsicAttributes & { children?”上不存在属性“component”:ReactNode; class?:部分|undefined; dense?:布尔|undefined; disablePadding?:布尔|undefined; subheader?:React节点; sx?:SxProps<...>|undefined; } & CommonProps & Omit<...>& MUIStyledCommonProps<...>
如果删除component="nav",一切正常,但我想知道为什么它说,如果List组件确实有这个属性不存在。我猜styled()给了我一些不同类型的对象,或者我需要让TypeScript知道它。

b1zrtrql

b1zrtrql1#

typescript对你大喊大叫的原因是因为component prop没有在ListProps接口中定义,所以你可以在这里添加它。

interface StyledListProps extends ListProps {
    component?: React.ElementType;
}

const StyledList = styled(List)<StyledListProps>({
    '& .MuiListItemButton-root': {
        paddingLeft: 24,
        paddingRight: 24,
    },
    '& .MuiListItemIcon-root': {
        minWidth: 0,
        marginRight: 16,
    },
    '& .MuiSvgIcon-root': {
        fontSize: 20,
    },
});

相关问题