【React】Failed prop type: Material-UI: You are providing an onClick event listener to a child of a button elementの対処法

症状

MaterialUIのAppBarを使用している際に、以下のエラーが発生しました。 翻訳すると、「失敗したプロップタイプ：Material-UI：ボタン要素の子にonClickイベントリスナーを提供しています。 Firefoxがイベントをトリガーすることはありません。 onClickリスナーを親ボタン要素に移動する必要があります。」でした

error

Warning: Failed prop type: Material-UI: You are providing an onClick event listener to a child of a button element.
Firefox will never trigger the event.
You should move the onClick listener to the parent button element.

以下、ソースです。

DenseAppBar

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function DenseAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" component="div">
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

解決策

IconButtonにonClickをねじ込み解決しました。 下記ではconsole.logを入れています。

DenseAppBar

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function DenseAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} onClick{console.log("OPEN")}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" component="div">
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

参考