Question

我已经搜索了几天，找不到任何东西。我在React中使用Material-Table，但无法弄清楚如何在标题（表格的列）和内容中添加CSS（例如，更改字体大小，宽度和使表格行成为带条纹的背景）。

谁能告诉我我该怎么做？

作为参考，这是我当前拥有的Material表，我想对行进行条纹处理并更改标题（列名）的外观

<MaterialTable
    title="Title"
    columns={this.state.columns}
    data={newDataTable}
    options={{
      selection: true
    }}
    options={{
      search: false,
      sorting: true
    }}
    actions={[
      {
        icon: () => <Checkbox />,
        tooltip: 'checkbox'
      },
      {
        icon: () => <InfoIcon />,
        tooltip: 'info',
        onClick: (event, item) => {
          this.setState({
            isOpen: true,
            selectedItem: item
          });
        }
      }
    ]}
  />
</div>

编辑：另外，无法弄清楚如何更改行的内容。例如，我想在对应于其数据的每个项目之前添加一个图标。目前，我只是使用js数组显示静态数据，但无法对其进行编辑。

Answer 1

只需在columns属性中定义样式：

this.setState({
    columns: {[
        {
            title: 'Name', field: 'name',
            cellStyle: {
              backgroundColor: '#039be5',
              color: '#FFF'
            },
            headerStyle: {
              backgroundColor: '#039be5',
            }
          },
          // Other columns
    ]}
});

请参见https://material-table.com/#/docs/features/styling

Answer 2

如果要在数据（行/单元格）中添加图标，则可以在列定义中使用内置的API.embedFormJava()回调，如下所示：

render

这将在每行的每个单元格前面插入图标const handleTableColumns = (cols) => { return cols.map((col) => ({ ...col, render: (rowData) => { return ( <span style = {{display: 'flex'}} > <KeyboardArrowRightIcon /> { rowData[col.id]} </span> ); }; })) };，因此在 materialTable 组件中，您必须使用<KeyboardArrowRightIcon /> 作为列：

handleTableColumns

如何样式化（添加CSS）到材料表（反应）？

2 个答案: