Passing empty props changes the Button color in ButtonGroup

user_16223122 0
Viewed 58

I'm using a customized IconButton element with ButtonGroup.

While passing an empty props, the color and hover shape of element is also changed. I want to know why did this happen? For me, an HOC shouldn't have different render effect with an empty prop passed.

I hosted a minimal environment with GitHub Pages. The question is shown on the second and third chapter.

customized component without passing "{...props}"

Using a new customized component.

Misbehavior: buttons are white and not in group. See the hover highlight of second and third "G" The component is based on IconButton without passing {...props}.

customized component with {...props}.

Using a new customized component. All good.

The component is also based on IconButton but passing {...props}. Although the props is not passed, hence should be empty(?). Maybe useStyles changed color, but the hover background shape is changed too.

Also I made a related issue on official repo, and in my Learning note

material-ui reactjs
1 Answers

It's the opposite, if you don't pass the props to IconButton:

function IconButtonWrapper(props /* unused props */) {
  return (
    <IconButton>
      <DeleteIcon />
    </IconButton>
  );
}

Then no styles are applied and the IconButton appears in plain white, so nothing changes.

Although the props is not passed

The props are passed automatically from the ButtonGroup, even if you don't pass anything. The way it works is that ButtonGroup clones the child component and pass its own set of props to them, so when you don't pass anything yourself like this:

<ButtonGroup variant="contained">
  <IconButtonWrapper />
  <IconButtonWrapper />
  <IconButtonWrapper />
</ButtonGroup>

The child component still has props provided by the parent, you can see it by logging the props:

function IconButtonWrapper(props) {
  console.log(props);
  return (
    <IconButton {...props}>
      <DeleteIcon />
    </IconButton>
  );
}

Codesandbox Demo

user_94494260
Related