Closed MatheusEli closed 1 week ago
@MatheusEli You're right that a
div
shouldn't be inside ap
, but this demo doesn't include adiv
child in the rendered Typography. If your app uses adiv
child, you should addcomponent="span"
. Adding it in this demo is unnecessary.
I agree @ZeeshanTamboli but i've seen a lot of people getting these warnings because you usually will put some tags and components inside tabs, maybe this will help them not getting that? like @qkeddy said in #21015
@MatheusEli You're right that a
div
shouldn't be inside ap
, but this demo doesn't include adiv
child in the rendered Typography. If your app uses adiv
child, you should addcomponent="span"
. Adding it in this demo is unnecessary.I agree @ZeeshanTamboli but i've seen a lot of people getting these warnings because you usually will put some tags and components inside tabs, maybe this will help them not getting that? like @qkeddy said in #21015
I understand your point after reading the comments in issue #21015. The issue is that users don't realize Typography renders a p
tag, leading to warnings when they copy and paste the demo code into their applications. Still changing the underlying component to span
in this demo doesn't make sense because the tab panel only renders text. A better solution might be to remove the Typography component from the demo:
--- a/docs/data/material/components/tabs/BasicTabs.tsx
+++ b/docs/data/material/components/tabs/BasicTabs.tsx
@@ -1,7 +1,6 @@
import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
interface TabPanelProps {
@@ -21,11 +20,7 @@ function CustomTabPanel(props: TabPanelProps) {
aria-labelledby={`simple-tab-${index}`}
{...other}
>
- {value === index && (
- <Box sx={{ p: 3 }}>
- <Typography>{children}</Typography>
- </Box>
- )}
+ {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
</div>
);
}
@MatheusEli You're right that a
div
shouldn't be inside ap
, but this demo doesn't include adiv
child in the rendered Typography. If your app uses adiv
child, you should addcomponent="span"
. Adding it in this demo is unnecessary.I agree @ZeeshanTamboli but i've seen a lot of people getting these warnings because you usually will put some tags and components inside tabs, maybe this will help them not getting that? like @qkeddy said in #21015
I understand your point after reading the comments in issue #21015. The issue is that users don't realize Typography renders a
p
tag, leading to warnings when they copy and paste the demo code into their applications. Still changing the underlying component tospan
in this demo doesn't make sense because the tab panel only renders text. A better solution might be to remove the Typography component from the demo:--- a/docs/data/material/components/tabs/BasicTabs.tsx +++ b/docs/data/material/components/tabs/BasicTabs.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; -import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; interface TabPanelProps { @@ -21,11 +20,7 @@ function CustomTabPanel(props: TabPanelProps) { aria-labelledby={`simple-tab-${index}`} {...other} > - {value === index && ( - <Box sx={{ p: 3 }}> - <Typography>{children}</Typography> - </Box> - )} + {value === index && <Box sx={{ p: 3 }}>{children}</Box>} </div> ); }
You're right, removing the Typography component from the demo is a better solution
@MatheusEli, I noticed your branch is pointing to master
. The default branch is next
. Could you please create a new PR and point it to next
? Also, make sure to update the corresponding TypeScript file for the demo (BasicTabs.tsx
).
@MatheusEli, I noticed your branch is pointing to
master
. The default branch isnext
. Could you please create a new PR and point it tonext
? Also, make sure to update the corresponding TypeScript file for the demo (BasicTabs.tsx
).
Sure! here it is: https://github.com/mui/material-ui/pull/42374
To avoid validateDOMNesting warning, we can use span as a component of Typography instead of p (default component).
A p tag can only contain inline elements. That means putting a div tag inside it should be improper, since the div tag is a block element. Improper nesting might cause glitches like rendering extra tags, which can affect your javascript and css.