MTableToolbar有這些課程MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters。您可以使用 來以這種方式覆蓋它們@material-ui/styles。先安裝一下，npm install @material-ui/style。然后按照下面的代碼操作：
import React from 'react';
import MaterialTable, { MTableToolbar } from 'material-table';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
toolbarWrapper: {
'& .MuiToolbar-gutters': {
paddingLeft: 0,
paddingRight: 0,
}
},
});
export default function App() {
const classes = useStyles();
return (
<MaterialTable
title="Toolbar Overriding Preview"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: '?stanbul', 63: '?anl?urfa' },
},
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]}
components={{
Toolbar: props => (
<div className={classes.toolbarWrapper}><MTableToolbar {...props} /></div>
),
}}
/>
)
}
替代解決方案：
還有另一種方法可以使用您自己的標題而不是覆蓋原始標題。
您必須復制道具才能隱藏默認標題并顯示您自己的標題。
Grid與 一起使用MTableToolbar，以便它們仍然彼此相鄰。
這是代碼：
import React from 'react';
import MaterialTable, { MTableToolbar } from 'material-table';
import { Grid } from '@material-ui/core';
export default function App() {
return (
<MaterialTable
title="Toolbar Overriding Preview"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: '?stanbul', 63: '?anl?urfa' },
},
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]}
components={{
Toolbar: props => {
// This will let you use your own Title while keeping the search
const propsCopy = { ...props };
// Hide default title
propsCopy.showTitle = false;
return (
<Grid container direction="row">
<Grid item xs={6}>
<h2>Your Own Title</h2>
</Grid>
<Grid item xs={6}>
<MTableToolbar {...propsCopy} />
</Grid>
</Grid>
);
}
}}
/>
)
}
