Material-Table:样式将覆盖所有自定义样式和Material UI样式,并且图标不会呈现 [英] Material-Table: styling is overiding all custom and Material UI styling and icons not rendering
问题描述
我正在尝试使用Material-Table组件-非常适合我正在构建的表(添加,编辑,删除和搜索行).我已经将其安装并用作页面的子组件-一切正常,但是...
I'm trying to use Material-Table component - it's perfect for a table that I'm buildling (add, edit, delete and search rows). I've installed and used it as a child component of a page - everything works but...
样式:页面中的所有自定义样式和内置样式都在所有Material UI组件中丢失(即AppBar按钮之间没有填充/间距,自定义字体样式被弄乱了).
STYLING: all custom and built-in styling in the page is lost in all the Material UI components (ie. AppBar buttons have no padding/spacing between, custom font styling is messed up).
图标:表格中的图标不会呈现-它们只会显示为大字体的截止文本.
ICONS: The icons in the table won't render - they just appear as large cut-off text.
其他没有表格的页面上的样式和图标不受影响.
Styling and icons on other pages without the table are not affected.
有人解决吗?预先感谢.
Anybody have a solve? Thanks in advance.
对于图标,我尝试重新安装该库并导入.也试过放 html方法.物料表代码的片段如下.
For icons, I tried reinstalling the library and importing. Also tried putting html method. Snippet of the Material Table code is below.
<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);
}),
}}
/>
推荐答案
要修复未显示的图标,您必须添加:
to fix icons not showing you have to add :
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
这篇关于Material-Table:样式将覆盖所有自定义样式和Material UI样式,并且图标不会呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!