[英]Material-Table: styling is overiding all custom and Material UI styling and icons not rendering
我正在嘗試使用 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);
}),
}}
/>
要修復未顯示的圖標,您必須添加:
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}
...
/>
在我的情況下,我使用的是@material-ui/core@4.0.0-beta,而 material-table 使用的是 4.2.1。
您可以在安裝材料表后獲取日志
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
所以我通過yarn add @material-ui/core@4.2.1
將材料 ui 升級到 @ yarn add @material-ui/core@4.2.1
。 然后它起作用了。
您可能正在使用 Material-UI v5,它與您使用的材料表版本不完全兼容,這就是它覆蓋您的 Material-UI 樣式的原因。
要使用支持 Material-UI v5 的 material-table 版本,請使用此命令安裝 material-table core。
npm install @material-table/core@next
或者
yarn add @material-table/core@next
檢查此鏈接:帶有@material-ui v5 的材料表
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.