Question

我在我的一个项目中使用 MUI DataTable Reactjs 。 https://www.npmjs.com/package/mui-datatables

我必须在特定的列上应用一些CSS，例如更改列的背景颜色。所以我想在头上添加一个类，并在其他行中分别添加td。

有什么方法可以用下面的代码添加类，因为几乎我创建的所有表都是这样的代码？

下面是用于创建列标题的代码。

const columns = [
  "Date",
  {
    name: "Description",
    options: {
      filter: false,
      customBodyRender: value => {
        return <a href={value[0]}>{value[1]}</a>;
      }
    }
  },
  "Articles",
  {
    name: "Amount",

  },
  {
    name: "",
    options: {
      filter: false,
      customBodyRender: value => {
        return (
          <a href={value[0]}>
            <img src={download} alt="" />
          </a>
        );
      }
    }
  }
];

并且表格正在使用以下数据生成 td 。

const data = [
  [
    "Nov 26",
    ["http://www.google.com", "Payouts for November 19-25, 2018"],
    "56.898",
    "74.164,75",
    ["http://www.google.com", "Downlaod"]
  ],
  [
    "Nov 26",
    ["http://www.google.com", "Payouts for November 19-25, 2018"],
    "56.898",
    "74.164,75",
    ["http://www.google.com", "Downlaod"]
  ],


];

表组件：

 <MUIDataTable
        title={"Payout history"}
        data={data}
        columns={columns}
        options={options}
      />

Answer 1

我认为您正在寻找customHeadRender选项而不是customBodyRender。 customBodyRender将允许您自定义列中的所有行，但是您需要customHeadRender自定义该列的标题。

以下示例使用customHeadRender，因此可能会有帮助：https://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js。您可以像在react中的任何节点上一样添加类，例如<td classNames={classes.myClass}>{value}</td>。

此外，您可能要考虑在表头中已存在的类上使用类替代。这是一个使用主题替代的自定义样式示例：https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js。

如何在MUI数据表头和列的相应td上添加类？

1 个答案: