title: Adding a custom button to DatePicker in material-ui
body: <p>I'm using a Datepicker for a project.
  I want to add a custom information button in the top right corner of the calendar, example shown in the image below</p>
  <p><a href="https://i.stack.imgur.com/fHMbn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fHMbn.png" alt="calendar and my desired custom button" /></a></p>
  <p>Didn't find anything useful in the <a href="https://material-ui-pickers.dev/demo/datepicker" rel="nofollow noreferrer">docs</a>, maybe you could help, if this is possible to do and how.</p>
  <p>--- EDIT ---</p>
  <p>I added as suggested a button which I want to put on top of the calendar, the code of the button :</p>
  <pre><code>const useStyles = makeStyles({
    paper: {
      outline: 'none',
      padding: '10px',
      position: 'absolute',
      left: '50%',
      top: '50%',
      WebkitTransform: 'translate(-50%, -50%)',
      transform: ' translate(-50%, -50%)',
      width: 'auto',
      backgroundColor: 'white',
      textAlign: 'center',
    },
    infoButtonShown: {
      display: 'inline-flex',
      position: 'absolute',
      left: '50%',
      top: '50%',
      WebkitTransform: 'translate(-50%, -50%)',
      transform: ' translate(-50%, -50%)',
      color: 'black',
    },
    infoButtonHidden: {
      display: 'none',
      position: 'absolute',
      left: '50%',
      top: '50%',
      WebkitTransform: 'translate(-50%, -50%)',
      transform: ' translate(-50%, -50%)',
      color: 'black',
    },
  });
  
  &lt;IconButton
      className={ isInfoOpen ? classes.infoButtonShown : 
                               classes.infoButtonHidden
                }&gt;
      &lt;InfoIcon fontSize=&quot;small&quot; /&gt;
  &lt;/IconButton&gt;
  </code></pre>
  <p>But it doesn't show on top of the calendar. I tried to play with various values of the z-index for the button, but with no success. Any ideas how can I put it on top of the calendar ?</p>
  <p>--- EDIT 2 ---</p>
  <p>As Ibrahim supposed, I'm trying to render a custom toolbar for this matter using ToolbarComponent :</p>
  <pre><code>import { DatePickerToolbar } from '@material-ui/pickers/DatePicker/DatePickerToolbar';
  
  ToolbarComponent={(props) =&gt; (
      &lt;div&gt;
          &lt;DatePickerToolbar {...props} /&gt;
          &lt;IconButton
              className={
                  isInfoOpen
                      ? classes.infoButtonShown
                      : classes.infoButtonHidden
              }
          &gt;
              &lt;InfoIcon fontSize=&quot;small&quot; /&gt;
          &lt;/IconButton&gt;
      &lt;/div&gt;
  )}
  </code></pre>
  <p>But it throws an error :</p>
  <blockquote>
  <p>× TypeError: Cannot read property 'trackMetric' of null</p>
  </blockquote>
  <p>I'm super lost, also there is no documentation on this DatePickerToolbar, I needed to specify the whole path for it to make it stop complaining that it doesn't finds it in the @material-ui/pickers package.
  Is there any valid toolbar I can use for this matter?</p>