React:为什么我不能给我的组件添加自定义样式类?

问题描述 投票:0回答:1

我做了一个简单的组件。

const CloseButton = ({ onClick }: { onClick: MouseEventHandler }) => {
  const classes = useStyles();
  return <CloseIcon className={classes.closeButtonStyles} onClick={onClick} />;
};

export default CloseButton;

我可以调用like:

<CloseButton onClick={handleClose} />

这样就可以了

但是当我添加一个 className 属性,例如

<CloseButton className={classes.closeButton} onClick={handleClose} />

我得到的错误是:

类型'{ className: string; onClick: () => void; }'不可分配给类型'IntrinsicAttributes & { onClick: (event: MouseEvent) => void; }'。 属性'className'不存在于类型'IntrinsicAttributes & { onClick.Event: MouseEvent) => void; }'。(event: MouseEvent) => void; }'。

为什么会出现这种情况?为什么会出现 className 属性与 onClick 榰?

javascript reactjs typescript
1个回答
2
投票

我不知道如何是 CloseIcon 组件的定义,但我猜测是道具类型不匹配。

请确保类型别名接口为 CloseIcon 包括 className 道具 onClick 方法道具)。)

interface CloseIconProps {
  className: string;
  onClick: () => void;
}

(你也可以选择定义 className 作为一个可选字段)


-2
投票

Typescript不知道该函数是一个React组件。

你可以尝试将React类型添加到组件中,例如,将其替换为 const CloseButton =您可以使用 const CloseButton: React.FC<{yourPropsHere: string}> =

热门问题
推荐问题
最新问题