React：为啥我不能向我的组件添加自定义样式类？

Posted 2023-03-16

【中文标题】React：为啥我不能向我的组件添加自定义样式类？

【英文标题】：React: why can't I add a custom styling class to my component?React：为什么我不能向我的组件添加自定义样式类？

【发布时间】：2020-09-24 05:12:26

【问题描述】：

我做了一个简单的组件：

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

export default CloseButton;

我可以这样称呼：

<CloseButton onClick=handleClose />

这很好用。

但是当我添加一个className 属性时，例如：

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

我得到错误：

类型 ' 类名：字符串； onClick: () => 无效； ' 不可赋值 输入 'IntrinsicAttributes & onClick: (event: MouseEvent) => void; '。属性“className”不存在于 输入'IntrinsicAttributes & onClick: (event: MouseEvent) => void; '

为什么会出现这种情况？为什么className 属性会与onClick 属性混淆？

【问题讨论】：

您的 CloseButton 组件不接受 className 作为道具，您正在使用 useStyles 分配类

CloseIcon 是如何定义的？

【参考方案1】：

我不确定CloseIcon 组件是如何定义的，但我猜测道具类型存在某种不匹配。

请确保CloseIcon 的类型别名/接口包含className 道具（在onClick 方法道具之上）：

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

（您也可以选择将className定义为可选字段）

【参考方案2】：

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

您可以尝试将 React 类型添加到组件中，例如而不是const CloseButton =，你会使用const CloseButton: React.FC<yourPropsHere: string> =