Material-Table：样式覆盖了所有自定义和 Material UI 样式以及未呈现的图标

Posted 2023-02-22

【中文标题】Material-Table：样式覆盖了所有自定义和 Material UI 样式以及未呈现的图标

【英文标题】：Material-Table: styling is overiding all custom and Material UI styling and icons not rendering

【发布时间】：2019-11-09 16:52:37

【问题描述】：

我正在尝试使用 Material-Table 组件 - 它非常适合我正在构建的表（添加、编辑、删除和搜索行）。我已经安装并使用它作为页面的子组件 - 一切正常，但是......

样式：页面中的所有自定义和内置样式在所有 Material UI 组件中都丢失了（即，AppBar 按钮之间没有填充/间距，自定义字体样式混乱）。

图标：表格中的图标不会呈现 - 它们只是显示为大的截断文本。

没有表格的其他页面的样式和图标不受影响。

有人有办法吗？提前致谢。

对于图标，我尝试重新安装库并导入。也试过放 html方法。材料表代码片段如下。

<MaterialTable
  title="Editable Example"
  columns=state.columns
  data=state.data
  actions=[
    
      icon: 'edit',
      tooltip: 'Edit Study',
      onClick: (event, rowData) => alert("Do you want to edit " + rowData.name + "?") 
    ,
    rowData => (
      icon: 'clear',
      tooltip: 'Delete User',
      onClick: (event, rowData) => alert("You want to delete " + rowData.name), 
      disabled: rowData.birthYear < 2000
    )
  ]
  editable=
    onRowAdd: newData =>
      new Promise(resolve => 
        setTimeout(() => 
          resolve();
          const data = [...state.data];
          data.push(newData);
          setState( ...state, data );
        , 600);
      ),
    onRowDelete: oldData =>
      new Promise(resolve => 
        setTimeout(() => 
          resolve();
          const data = [...state.data];
          data.splice(data.indexOf(oldData), 1);
          setState( ...state, data );
        , 600);
      ),
  
/>

【问题讨论】：

github.com/mbrn/material-table 是您正在使用的库吗？如果是这样，则package.json 将 Material-UI 作为依赖项而不是对等依赖项。这可能会导致您同时拥有两个版本的 Material-UI，这可能是您的问题的根源。

相关 GitHub 问题：github.com/mbrn/material-table/issues/472

非常感谢@RyanCogswell。这绝对是问题所在。我的项目时间有限，所以我最终只是用常规的材料 ui 重做它——我没有足够的经验来快速解决依赖问题（不是经过培训的编码器，所以我只在我们学习时才开始编码）在时间紧迫的情况下）。我有与材料表相同的材料 ui 版本 --> 4.0.1。如果有人可以指导我找到一些资源来解决，那将不胜感激！ - 否则我以后再研究。

@RyanCogswell 如何同时拥有两个版本的 Material-UI？我正在使用 @material-ui/core@4.2.1 并在 package-lock.json 文件中看到 "material-table" "version": "1.40.1" 具有 @material-ui/core": "^4.0.1 和依赖关系 @material-ui/core": "version": "4.2.1",... 我的 SO 帖子 @987654324 @

我将 material-ui/core 和图标降级到 4.0.1，与为 material-table 列出的依赖项相同并修复了它。

【参考方案1】：

您可能使用的是 Material-UI v5，它与您使用的材料表版本不完全兼容，这就是它覆盖您的 Material-UI 样式的原因。

要使用支持 Material-UI v5 的材料表版本，请使用此命令安装材料表核心。

npm install @material-table/core@next

或

yarn add @material-table/core@next

查看此链接：material-table with @material-ui v5

【参考方案2】：

要修复未显示的图标，您必须添加：

import  forwardRef  from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = 
    Add: forwardRef((props, ref) => <AddBox ...props ref=ref />),
    Check: forwardRef((props, ref) => <Check ...props ref=ref />),
    Clear: forwardRef((props, ref) => <Clear ...props ref=ref />),
    Delete: forwardRef((props, ref) => <DeleteOutline ...props ref=ref />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight ...props ref=ref />),
    Edit: forwardRef((props, ref) => <Edit ...props ref=ref />),
    Export: forwardRef((props, ref) => <SaveAlt ...props ref=ref />),
    Filter: forwardRef((props, ref) => <FilterList ...props ref=ref />),
    FirstPage: forwardRef((props, ref) => <FirstPage ...props ref=ref />),
    LastPage: forwardRef((props, ref) => <LastPage ...props ref=ref />),
    NextPage: forwardRef((props, ref) => <ChevronRight ...props ref=ref />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft ...props ref=ref />),
    ResetSearch: forwardRef((props, ref) => <Clear ...props ref=ref />),
    Search: forwardRef((props, ref) => <Search ...props ref=ref />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward ...props ref=ref />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove ...props ref=ref />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn ...props ref=ref />)
  ;

<MaterialTable
  icons=tableIcons
  ...
/>

官方文档：https://github.com/mbrn/material-table

【参考方案3】：

在我的情况下，我使用的是@material-ui/core@4.0.0-beta，而material-table 使用的是4.2.1。

安装material-table后即可获取日志

info Direct dependencies
├─ @material-ui/core@4.2.1
└─ material-table@1.40.1
info All dependencies
├─ @babel/runtime-corejs2@7.5.5
├─ @date-io/date-fns@1.3.8
├─ @material-ui/core@4.2.1
├─ @material-ui/styles@4.2.1
├─ @material-ui/system@4.3.1
├─ convert-css-length@2.0.1
├─ css-box-model@1.1.3
├─ date-fns@2.0.0-beta.2
├─ debounce@1.2.0
├─ filefy@0.1.9
├─ material-table@1.40.1
├─ normalize-scroll-left@0.2.0
├─ raf-schd@4.0.2
├─ react-beautiful-dnd@11.0.3
├─ react-double-scrollbar@0.0.15
└─ use-memo-one@1.1.1

所以我将材料 ui 升级到 @material-ui/core@4.2.1 by yarn add @material-ui/core@4.2.1。然后就可以了。