The <Table/> component has a component prop:
The component used for the root node. Either a string to use a HTML element or a component.
I set the component prop to 'p' element for <Table/> and <TableHead />, the table can render as normal.
But, this will violates w3c html element nesting rules. See 9.3.1 Paragraphs: the P element
The
Pelement represents a paragraph. It cannot contain block-level elements (includingPitself).
So, I'm worried that this will cause some potential problems. Can you explain is this safe to use?
export default function CustomizedTables() {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table" component='p'>
<TableHead component='p'>
<TableRow>
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
<StyledTableCell align="right">Calories</StyledTableCell>
<StyledTableCell align="right">Fat (g)</StyledTableCell>
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
<StyledTableCell align="right">Protein (g)</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<StyledTableRow key={row.name}>
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
<StyledTableCell align="right">{row.calories}</StyledTableCell>
<StyledTableCell align="right">{row.fat}</StyledTableCell>
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
<StyledTableCell align="right">{row.protein}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
Inspect the HTML elements:
Top comments (0)