将 MUIDataTable 主题标题位置设置为 \'sticky\'答案

【问题标题】：Set MUIDataTable theme header position to 'sticky'将 MUIDataTable 主题标题位置设置为 \'sticky\'
【发布时间】：2023-02-17 20:09:19
【问题描述】：

我正在尝试将我的 thead 的位置设置为“粘性”在 MUIDataTable 中。

我有一个 getMuiTheme 方法：

export const getMuiTheme = () => createMuiTheme({
  overrides: {
      MuiTableCell: {
          head: {
              backgroundColor: "#c1e1ec !important",
              position: 'sticky',
          }
      },
  }
});

我在我的MuiThemeProvider 中设置了这个主题：

<MuiThemeProvider theme={getMuiTheme()}>                                                    
   <MUIDataTable
      title={renderTitle()}
      data={showUnits()}
      columns={columns}
      options={options}
   />
</MuiThemeProvider>

backgroundColor 有效，但我的职位无效。如果我使用浏览器控制台手动更改 thead 位置，它就可以工作。

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

这是一个工作示例：CodeSandbox。请看这个例子。

此外，您还可以查看下面的链接以直观地查看解决方案：TestWise Replay | Stack Overflow QA - MUI data-table header sticky

【讨论】：