Material-table: Typography in title causes console error: : <h6> cannot appear as a child of <h6>

[diegosps]

Describe the bug
I'm trying to override the font size for the table title, so instead of passing a string, i'm passing a typography with subtitle variant (smaller size).

To Reproduce
Steps to reproduce the behavior:

<MaterialTable
      title={
        <Typography inline variant="subtitle1">
          Hi!
        </Typography>
      }
...
/>

Results in:

<div class="MTableToolbar-title-870">
  <h6 class="MuiTypography-root-578 MuiTypography-h6-595">
    <h6 class="MuiTypography-root-578 MuiTypography-subtitle1-596 MuiTypography-inline-613">
      Hi!
    </h6>
  </h6>
</div>

index.js:1437 Warning: validateDOMNesting(...): <h6> cannot appear as a child of <h6>.
    in h6 (created by Typography)
    in Typography (created by WithStyles(Typography))
    in WithStyles(Typography) (at HistoricoProcesso.js:13)
    in h6 (created by Typography)
    in Typography (created by WithStyles(Typography))

Expected behavior
When a component is set for title it should not render the first <h6> tag

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome 74
• Version 1.36.4

[mbrn]

Hi @diegosps

Actually this is not bug. you can use div instead of Typography to overcome this warning.

[diegosps]

title={ <div> <Typography variant="subtitle1">Processos</Typography> </div> }

A little bit hacky, but works. Otherwise I would have to style the div itself instead of using the functionality of the Typography. Thanks

[sandeep194920]

You might be using <Typography/>inside <DialogTitle/>. If this is the case and when you use variant prop inside Typography then you will see this error.
The solution to this is to add disableTypography prop inside and you will get rid of this error.

// Here you can get error

<DialogTitle>
    <Typography variant="h6"/>
</DialogTitle>

// Here you can get rid of the error

<DialogTitle disableTypography> 
    <Typography variant="h6"/>
</DialogTitle>