Material UI Table字体发白、图标不显示及Material UI Icons使用问题如何解决

问题原因&解决方案 #

1. 表格字体为白色无法查看 #

原因

你仅为表格设置了白色背景，未修改文字颜色配置，若外层MUI主题为暗色模式、或项目全局CSS设置了表格单元格文字为白色，就会出现白背景配白字的问题。

修复方案

在MaterialTable组件的options属性中强制指定单元格文字颜色，示例配置如下：

<MaterialTable
  title="XNA Logs"
  columns={columns}
  data={data}
  style={{ backgroundColor: "white", margin: "3%" }}
  // 新增下面的options配置
  options={{
    cellStyle: { color: '#000' }, // 普通单元格文字为黑色
    headerStyle: { color: '#000' } // 表头文字为黑色
  }}
/>

如果是全局MUI主题配置为暗色模式，可将外层ThemeProvider中主题的palette.mode改为light即可全局生效。

2. 图标无法正常显示 #

原因

你引入@material-ui/icons的方式无效，无法全局导入所有图标，且material-table组件需要显式传入用到的图标组件，版本不匹配也会导致图标失效。

修复方案

1. 先确认版本匹配：material-table v1.x对应@material-ui/core v4和@material-ui/icons v4，如果版本不匹配可执行以下命令重装对应版本：

npm install material-table@1.69.3 @material-ui/core@4.12.4 @material-ui/icons@4.11.3

2. 按需导入需要的图标并传入组件，完整修改后的代码如下：

import React,{useState,useEffect} from 'react';
import MaterialTable from 'material-table';
// 按需导入所需图标
import { AddBox, ArrowDownward, Check, ChevronLeft, ChevronRight, Clear, DeleteOutline, Edit, FilterList, FirstPage, LastPage, Remove, SaveAlt, Search, ViewColumn } from '@material-ui/icons';

// 配置表格图标
const tableIcons = {
  Add: AddBox,
  Check: Check,
  Clear: Clear,
  Delete: DeleteOutline,
  DetailPanel: ChevronRight,
  Edit: Edit,
  Export: SaveAlt,
  Filter: FilterList,
  FirstPage: FirstPage,
  LastPage: LastPage,
  NextPage: ChevronRight,
  PreviousPage: ChevronLeft,
  ResetSearch: Clear,
  Search: Search,
  SortArrow: ArrowDownward,
  ThirdStateCheck: Remove,
  ViewColumn: ViewColumn
};

export default function AdminXnaLog() {
  const [data, setData] = useState([]); //table data
  const [iserror, setIserror] = useState(false)
  const [errorMessages, setErrorMessages] = useState([])
  const columns = [
    {title: "id", field: "_id", hidden: true},
    {title: "Member No", field: "memberno"},
    {title: "Name", field: "name"},
    {title: "Surname", field: "surname"}
  ]
   
  useEffect(() => {
    async function fetchBooks() {
      const response = await fetch('/xnalogget');
      const json = await response.json();
      setData(json.xl);
      console.log(json.xl)
    }
    fetchBooks();
  },[]);
  
  return (
    <MaterialTable
      icons={tableIcons} // 传入图标配置
      title="XNA Logs"
      columns={columns}
      data={data}
      style={{ backgroundColor: "white", margin: "3%" }}
      options={{
        cellStyle: { color: '#000' },
        headerStyle: { color: '#000' }
      }}
    />
  )
}

内容的提问来源于stack exchange，提问作者Beren