DEV Community

official_dulin
official_dulin

Posted on

Why Material UI table component prop can violates w3c html element nesting rules?

#javascript #help #react #html

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 P element represents a paragraph. It cannot contain block-level elements (including P itself).

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&nbsp;(g)</StyledTableCell>  <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>  <StyledTableCell align="right">Protein&nbsp;(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>  ); }
Enter fullscreen mode Exit fullscreen mode

Inspect the HTML elements:

enter image description here

stackblitz demo

Top comments (0)