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

【问题标题】：How to add class on MUI datatable head and respective td for column?如何在 MUI 数据表头和列的相应 td 上添加类？
【发布时间】：2019-10-05 15:43:06
【问题描述】：

我在我的一个项目中使用 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}
      />

【问题讨论】：

标签： css reactjs mui-datatable

【解决方案1】：

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

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

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

【讨论】：