反应物料表未显示表图标

问题描述

我有一个必须使用表格的项目。我正在使用材料表。但是我似乎无法使它看起来正确。该表所需的图标没有显示，而是显示了一些占位符文本。

这是我用来显示表格的代码。我在项目中安装了材料表和材料图标。

class RegistrationList extends Component {
  state = {
    registrations: [],};

  infoButtonHandler(id) {}

  componentDidMount() {
    axios.get("http://localhost:3030/api/items").then((res) => {
      let registrations = [];
      res.data.forEach((registration) => {
        let childeren = "";
        for (let i = 0; i < registration.childeren.length; i++) {
          childeren += registration.childeren[i].name;
          if (i + 1 !== registration.childeren.length) {
            childeren += ",";
          }
        }
        registrations.push({
          _id: registration._id,name: registration.name,childeren: childeren,street: registration.street,houseNumber: registration.houseNumber,city: registration.city,postalCode: registration.postalCode,});
      });
      this.setState({ registrations: registrations });
    });
  }

  rowClickedHandler(rowData) {
    this.props.history.push("/RegistrationDetail/" + rowData._id);
  }

  render() {
    let table = (
      <MaterialTable
        title="Overzicht"
        columns={[
          { title: "familienaam",field: "name" },{ title: "kinderen",field: "childeren" },{ title: "dorp",field: "city" },{ title: "postcode",field: "postalCode" },{ title: "straat",field: "street" },{ title: "nr.",field: "houseNumber" },]}
        data={this.state.registrations}
        options={{
          search: true,}}
        onRowClick={(event,rowData) => this.rowClickedHandler(rowData)}
      />
    );
    return <div>{table}</div>;
  }
}

解决方法

通过yarn add @ material-ui / core @ 4.2.1将材料UI升级到@ material-ui / core @ 4.2.1，希望它可以工作

要使其正常工作，我手动添加了它们。

它在网站上直接说material-table

添加材料图标在材质表中使用图标的方法有两种，一种是通过html导入材质图标字体，另一种是使用材质表图标，然后使用材质表图标prop。

HTML

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

导入材料图标可以导入图标以在材质表中使用，从而提供更大的灵活性，从而可以通过使用字体库来自定义材质表的外观。

要使用npm安装@ material-ui / icons：

npm install @material-ui/icons --save

要使用纱线安装@ material-ui / icons：

yarn add @material-ui/icons

如果您的环境不支持摇树，则建议的导入图标的方法如下：

import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";

如果您的环境支持摇树，您也可以通过以下方式导入图标：

import { AddBox,ArrowDownward } from "@material-ui/icons";

注意：以这种方式导入命名的导出将导致项目中包含每个图标的代码，因此除非您配置树状摇动，否则不建议这样做。它还可能会影响热模块重装性能。资料来源：@ material-ui / icons

示例

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,PreviousPage: forwardRef((props,ref) => <ChevronLeft {...props} ref={ref} />),ResetSearch: forwardRef((props,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}
  ...
/>

这种方法对我有用

 import DeleteIcon from '@material-ui/icons/Delete';

actions={[
        
        rowData => ({
          icon: DeleteIcon,tooltip: 'Delete User',onClick: (event,rowData) => confirm("You want to delete " + rowData.name),disabled: rowData.birthYear < 2000
        })
      ]}

material-table material-ui reactjs reactjs