xxxxxxxxxx
<Typography component={'span'} variant={'body2'}>
xxxxxxxxxx
I got this warning by using Material UI components, then I test the
component="div" as prop to the below code and everything became correct:
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
<Typography component="span">
<Grid component="span">
Lorem Ipsum
</Grid>
</Typography>
add `component` attribute to the Tag causing the error
xxxxxxxxxx
<p>
<div></div>
</p>
//According to this document, a <p></p> tag can only contain inline elements. That means putting a <div></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.
//If you want to get rid of this warning, you might want to customize the ReactTooltip component, or wait for the creator to fix this warning.
//If you're looking for where this is happening, in console you can use:
document.querySelectorAll(" p * div ")
//Here's another version that made finding the item more verbose for me
document.querySelectorAll("p > div")
xxxxxxxxxx
<Box sx={{ p: 3 }}>
<Typography variantMapping={{body2: 'div', inherit: 'div', root: 'div', body1: 'div'}}>
{children}
</Typography>
</Box>
xxxxxxxxxx
<div>
<a href="https://example.com">Outer Link</a>
<span>Some content here</span>
<a href="https://example.com">Inner Link</a> <!-- Replace this inner link -->
</div>
xxxxxxxxxx
<p>This is a paragraph.</p>
<div>
<p>This is a nested block of content.</p>
</div>