React: why can't I add a custom styling class to my component?

Question

I've made a simple component:

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

export default CloseButton;

Which I can call like:

<CloseButton onClick={handleClose} />

This works fine.

But when I add a className attribute, eg:

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

I get the error:

Type '{ className: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & { onClick: (event: MouseEvent) => void; }'. Property 'className' does not exist on type 'IntrinsicAttributes & { onClick: (event: MouseEvent) => void; }'

Why does this appear? Why is the className attribute getting mixed up with the onClick prop?

your CloseButton component doesn't accept className as a prop, you are assigning the classes using useStyles — Matin Kajabadi

wentjun wentjun · Accepted Answer · 2020-06-05T04:23:07

I'm not sure how is the CloseIcon component defined, but I am guessing that there is some kind of mismatch of props typings.

Do make sure that the type aliases/interfaces for CloseIcon includes the className props (on top of the onClick method props):

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

(You can also choose to define className as an optional field)

React: why can't I add a custom styling class to my component?

2 Answers