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

Question

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

谁能告诉我我该怎么做？

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

<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