如何将带文本的Button等次级操作元素置于ListItemButton旁？

核心结论 #

secondaryAction 插槽不是仅支持IconButton，只是默认样式适配了IconButton的小尺寸，带文本的Button需要调整布局和样式来避免重叠。

具体解决步骤 #

1. 给ListItemButton预留右侧空间 #

ListItemButton默认的右侧内边距是为IconButton设计的，带文本的Button宽度更大，需要手动增大右侧内边距，避免内容重叠：

<ListItemButton sx={{ pr: '100px' }}> {/* 数值根据Button实际宽度调整 */}
  <ListItemText primary="列表项内容" />
</ListItemButton>

2. 固定右侧Button的布局 #

用绝对定位或容器包裹Button，确保它不会被ListItemButton的内容挤压：

<ListItemButton sx={{ pr: '100px', position: 'relative' }}>
  <ListItemText primary="列表项内容" />
  {/* 绝对定位右侧Button，垂直居中 */}
  <Box 
    sx={{ 
      position: 'absolute', 
      right: 16, 
      top: '50%', 
      transform: 'translateY(-50%)' 
    }}
  >
    <Link to="/target-path">
      <Button variant="contained">带文本按钮</Button>
    </Link>
  </Box>
</ListItemButton>

3. 结合TanStack Router Link的优化写法 #

如果使用MUI的Button，可以直接将component属性设为Link，减少嵌套层级，样式更可控：

<ListItemButton sx={{ pr: '100px' }}>
  <ListItemText primary="列表项内容" />
  <Box sx={{ position: 'absolute', right: 16, top: '50%', transform: 'translateY(-50%)' }}>
    <Button 
      variant="outlined"
      component={Link}
      to="/target-path"
    >
      跳转按钮
    </Button>
  </Box>
</ListItemButton>

4. 使用ListItemSecondaryAction插槽的正确姿势 #

如果用ListItem组件配合ListItemSecondaryAction，需要给插槽设置宽度，避免Button被压缩：

<ListItem>
  <ListItemButton>
    <ListItemText primary="列表项内容" />
  </ListItemButton>
  <ListItemSecondaryAction sx={{ width: 'auto', paddingLeft: 2 }}>
    <Link to="/target-path">
      <Button variant="text">操作按钮</Button>
    </Link>
  </ListItemSecondaryAction>
</ListItem>

原因说明 #

出现重叠的本质是ListItemButton的默认布局没有考虑宽尺寸按钮的情况，通过调整内边距、固定右侧元素的位置或宽度，就能让带文本的Button正常显示，同时不影响ListItemButton的点击区域。

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