[Tabs] Improve TabPanel demos, avoid validateDOMNesting warning

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

New experimental Tabs API uses <Typography> as the root element for children, preventing nesting anything besides simple text without validateDOMNesting errors. See here: https://github.com/mui-org/material-ui/blob/8c2abebab524a68e97ffb5cf0c2015a915bd2e12/packages/material-ui-lab/src/TabPanel/TabPanel.js#L36

Expected Behavior 🤔

I believe that removing <Typography> completely and rendering children directly would be the best solution with maximum flexibility.

Context 🔦

Will sent a PR if you agree with the solution.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.13
Material-UI lab	v4.0.0-alpha.53
React	16.13.1

[VikR0001]

Note: the warning appears only because the demo code has:

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

Changing it like this takes care of it:

function TabPanel(props) {
    const {children, value, index, classes, ...other} = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Container>
                    <Box>
                        {children}
                    </Box>
                </Container>
            )}
        </div>
    );
}

[samfromaway]

Yes that fixed it for me thanks a lot. As you said the demo code should probably be updated.