使用 Material-UI 的 DataGrid 组件，如何在其中一个单元格中创建多层文本？

Question

我试图在一个单元格内有两行单独的文本，其中一行文本位于另一行之上，在 Material-UI 的数据网格组件中，似乎无法实现任何工作。这是我尝试过的：

 const columns: ColDef[] = [
        {
            field: "name",
            headerName: "Sector",
            width: 300,
            renderCell: (params) => {
                let name = params.data.name
                const flow = params.data as IOFlow;
                const title = Currency.format(flow.value)
                    + " " + props.direction
                    + " per " + Currency.format(1);
                return (
                    <>
                         <Typography fullWidth display='block'>
                              {name}
                         </Typography>
                         <br/>
                         <Typography fullWidth display='block'>
                              {title}
                         </Typography>
                    </>
                );
            }
        },
    ];

如果我还需要提供更多信息，请告诉我。

Answer 1

<>...</>主要问题是您不应该在单元格内容周围使用片段 ( )。使用 a<div>代替。该单元格的样式display: flex将水平布局直接子元素（即您的排版元素）。如果将单元格内容包装在 a 中<div>，则 a 中的内容<div>将按照您的预期运行。

这是一个工作示例：

import * as React from "react";
import { DataGrid } from "@material-ui/data-grid";
import Typography from "@material-ui/core/Typography";

const columns = [
  {
    field: "name",
    headerName: "Sector",
    width: 300,
    renderCell: (params) => (
      <div>
        <Typography>{params.value.name}</Typography>
        <Typography color="textSecondary">{params.value.title}</Typography>
      </div>
    )
  }
];

const rows = [
  {
    id: 1,
    name: { name: "Name1", title: "Title1" }
  },
  {
    id: 2,
    name: { name: "Name2", title: "Title2" }
  },
  {
    id: 3,
    name: { name: "Name3", title: "Title3" }
  }
];

export default function RenderCellGrid() {
  return (
    <div style={{ height: 300, width: "300" }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}