MUI Divider设置fullWidth后无法占满页面整行宽度问题

问题根源 #

• MUI默认的TableCell组件自带左右内边距，普通子元素默认只能在内容区域渲染，碰不到单元格的边缘，哪怕Divider设置了variant="fullWidth"也突破不了父元素的内边距限制
• 之前写的width: "110%"是硬凑的数值，换个屏幕尺寸、列宽变了就会错位，根本适配不了全场景。

可行修复方案 #

方案1：负边距适配（改动最小，推荐） #

不用改现有结构，直接给Divider加和TableCell左右padding等宽的负外边距，把宽度拉满整行：

<Divider
  variant="fullWidth"
  style={{
    margin: '0 -16px', // MUI v5 TableCell默认左右padding为16px，和这个值对齐就行
    width: 'auto'
  }}
/>

如果你自己在classes.tableCell里改过单元格padding，把负边距数值改成和你设置的左右padding一致就可以。

方案2：移除单元格默认内边距，手动给内容加间距 #

如果不想用负边距，可以直接把承载内容的TableCell默认padding关掉，再给除Divider外的其他内容块手动加内边距：

<TableCell className={classes.tableCell} colSpan={6} padding="none">
  <Box
    display="grid"
    gridTemplateColumns="12% 12% 12% 12% 12%"
    gridRow="1"
    px={2}
    pt={2}
  >
    <Box textAlign="left" gridColumn="1">
      <p>One</p>
    </Box>
    <Box textAlign="left" gridColumn="2">
      <p>Two</p>
    </Box>
    <Box textAlign="left" gridColumn="3">
      <p>3</p>
    </Box>
    <Box textAlign="left" gridColumn="4">
      <p>4</p>
    </Box>
  </Box>
  <Divider variant="fullWidth" />
  <Box padding={2}>
    <TableContainer>
      <Table stickyHeader>
        <TableHead>
          <TableRow>
            
          </TableRow>
        </TableHead>
      </Table>
    </TableContainer>
  </Box>
</TableCell>

注意：你贴的原代码里漏写了</Table>闭合标签，修复的时候记得补上，DOM结构错乱也会导致样式异常。

避坑提示 #

• 不要靠写死百分比宽度（比如之前的110%）适配，表格支持列拖拽、响应式适配、页面缩放的时候，这种写法百分百会出现溢出或者长度不够的问题
• 如果你用的是MUI v4版本，默认TableCell的左右padding是24px（紧凑dense模式下是16px），对应调整负边距数值即可。

内容的提问来源于stack exchange，提问作者Tanu