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

Question

我正在尝试使用 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);
      }),
  }}
/>

Answer 1

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

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

Answer 2

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

\n\n

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

\n\n

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

\n\n

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

\n