Material UI ：将头像和文本放在表格的第一列中

Question

\n

我有这个项目，里面有这个界面，正如它出现在第一列的图片中一样，我希望用户名与 user\xe2\x80\x99s 图片一起放置在一些图片旁边，但正如它出现的那样图中，放置了用户\xe2\x80\x99s 的名称，用户\xe2\x80\x99s 的图片位于其上方。

\n

我怎么解决这个问题？

\n

而这是一个文件，其中设计了表格，并传递了头部和主体。

\n

import React from \'react\';\nimport {makeStyles} from \'@material-ui/core/styles\';\nimport Table from \'@material-ui/core/Table\';\nimport TableBody from \'@material-ui/core/TableBody\';\nimport TableCell from \'@material-ui/core/TableCell\';\nimport TableContainer from \'@material-ui/core/TableContainer\';\nimport TableHead from \'@material-ui/core/TableHead\';\nimport TableRow from \'@material-ui/core/TableRow\';\nimport Paper from \'@material-ui/core/Paper\';\nimport Card from \'@material-ui/core/Card\';\nimport Box from \'@material-ui/core/Box\';\nimport Avatar from \'@material-ui/core/Avatar\';\n\nconst useStyles = makeStyles({\n    table: {\n        minWidth: 640\n    },\n});\n\nfunction createData(name: string, email: string, role: string, settings: number) {\n    return {name, email, role, settings};\n}\n\nconst rows = [\n    createData(\'Frozen yoghurt\', \'hhhhhh\', \'kjhi\', 24),\n    createData(\'Frozen yoghurt\', \'hhhhhh\', \'kjhi\', 24),\n    createData(\'Frozen yoghurt\', \'hhhhhh\', \'kjhi\', 24),\n    createData(\'Frozen yoghurt\', \'hhhhhh\', \'kjhi\', 24),\n    createData(\'Frozen yoghurt\', \'hhhhhh\', \'kjhi\', 24),\n];\n\nexport default function BasicTable() {\n    const classes = useStyles();\n\n    return (\n        <Card>\n\n                <TableContainer component={Paper}>\n                    <Box sx={{ p:5 }}>\n                    <Table className={classes.table} aria-label="simple table">\n                        <TableHead>\n                            <TableRow >\n                                <TableCell style={{fontSize:\'1.3rem\'}}>NAME</TableCell>\n                                <TableCell  style={{fontSize:\'1.3rem\'}} align="left">EMAIL</TableCell>\n                                <TableCell  style={{fontSize:\'1.3rem\'}} align="center">ROLE</TableCell>\n                                <TableCell  style={{fontSize:\'1.3rem\'}} align="right">SETTINGS</TableCell>\n                            </TableRow>\n                        </TableHead>\n                        <TableBody>\n                            {rows.map((row) => (\n                                <TableRow style={{fontSize: \'4rem\'}} key={row.name}>\n\n                                        <TableCell   align="left" component="th" scope="row">\n                                            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />\n                                            {row.name}\n                                        </TableCell>\n\n\n                                    {/*<TableCell align="right">{row.name}</TableCell>*/}\n                                    <TableCell align="left">{row.email}</TableCell>\n                                    <TableCell align="center">{row.role}</TableCell>\n                                    <TableCell align="right">{row.settings}</TableCell>\n                                </TableRow>\n                            ))}\n                        </TableBody>\n                    </Table>\n                    </Box>\n                </TableContainer>\n\n\n        </Card>\n\n    );\n}\n

\n

Answer 1

让CardHeader组件为您处理这个问题。只需将此组件放在第一个即可TableCell。

<CardHeader
  avatar={
    <Avatar
      alt="Remy Sharp"
      src="/static/images/avatar/1.jpg"
    />
  }
  title={row.name}
/>

输出：