设置列表组件之间的固定边距

Question

我在我的代码中使用 Material UI 列表组件。

这是代码片段：

<List>
    <ListItem button>
      <ListItemText
        disableTypography
        primary={<Typography>Hello</Typography>}
      />
      <p>John</p>
      <DraftsIcon />
    </ListItem>
  </List>

结果截图如下：

如何设置“Hello”和“John”之间的固定距离？

并避免以下情况：

Answer 1

// just add minWidth in button 

     <List>
        <ListItem button>
          <ListItemText
            style={{minWidth:"50px" }}
            disableTypography
            primary={<Typography>Hello</Typography>}
          />
          <p>John</p>
          <DraftsIcon />
        </ListItem>
      </List>

你也可以这样做：

import React from 'react';
import Box from '@material-ui/core/Box';
import { IconButton, Typography } from '@material-ui/core';
import DraftsIcon from "@material-ui/icons/Drafts";

export default function FlexGrow() {
  return (
      <Box display="flex" p={1} >
        <Box p={1} flexGrow={1} >
        <Typography variant="button" display="block" gutterBottom>
          Hello
        </Typography>
        </Box>
        <Box p={1} >
        <Typography variant="button" display="block" gutterBottom>
          John
        </Typography>
        </Box>
      <IconButton color="inherit" style={{marginTop :"-10px"}}>
        <DraftsIcon/>
        </IconButton>
      </Box>
  );
}

设置列表组件之间的固定边距

Set a fixed margin between list component

css

reactjs

material-ui

listitem