Javascript 向已经具有onClick功能的组件添加道具？

我是新来的反应和打字脚本

我创建了一个简单的组件：

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

export default CloseButton;

但是我不确定如何将

className

添加到组件中

通常我会这样做

const CloseButton = ({ className }: CloseButtonProps) => {

但我不确定如何与上面的

onClick

一起执行此操作

有人知道怎么做才是最好的吗？

界面关闭按钮按钮{
interface CloseButtonProps {
  className?: string;
  onClick?: (e:React.MouseEvent<any>) => void;
  /* You can add another props  here */
}


const CloseButton = ({ className, onClick }: CloseButtonProps) => {
  ...
}

类名？：字符串；
onClick？：（e:React.MouseEvent）=>void；
/*你可以在这里添加其他道具*/
}
const CloseButton=（{className，onClick}:CloseButtonProps）=>{
...
}

只需将两个道具组合成一个界面：

界面关闭按钮按钮
{
类名？：字符串
onClick:MouseEventHandler
}
const CloseButton=（{className，onClick}:CloseButtonProps）=>
{
//然而，您计划集成className
}
导出默认关闭按钮

interface CloseButtonProps {
  className?: string;
  onClick?: (e:React.MouseEvent<any>) => void;
  /* You can add another props  here */
}


const CloseButton = ({ className, onClick }: CloseButtonProps) => {
  ...
}