Material UI Tooltip Component overwriting className on children components

Question

Example Here

There are three buttons visible.

The first of which has no tooltip, and changes colour based on state and hover. The second has a tooltip, and the className is being overwritten, which results in the wrong colours being displayed. The third simply has the props re-ordered in the child component to solve the problem.

My question: Is this the expected behaviour? Do I really have to make className the last prop so that it actually gets used?

Answer 1

In Material UI, you generally have to follow their recommendation for styling your components. One of which is to Override Style with classes prop

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>
  );
});