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 (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:

stackblitz demo