Javascript 材质UI工具提示组件覆盖子组件上的类名

有三个按钮可见

第一个没有工具提示，并且根据状态和悬停改变颜色。 第二个有一个工具提示，类名被覆盖，这会导致显示错误的颜色。 第三种方法只是在子组件中重新排序道具以解决问题

---

我的问题是：这是预期的行为吗？我真的必须把

className

作为最后一个道具，这样它才能真正被使用吗？

在Material UI中，您通常必须按照他们的建议来设计组件的样式。其中之一就是

const StatusButton=React.forwardRef（（props，ref）=>{
const{classes，status，…rest}=props；
返回(
{状态}
);
});

const StatusButton = React.forwardRef((props, ref) => {
  const { classes, status, ...rest } = props;

  return (
    <Button
      variant="contained"
      color="primary"
      size="small"
      classes={{root: classes[status]}} // this was previously className prop
      ref={ref}
      {...rest}
    >
      <CloseIcon fontSize="small" className={classes.actionIcon} />
      {status}
    </Button>
  );
});