如何在 MTableToolbar 上应用disableGutters 属性？

Question

我正在使用 React Material-Table，并希望覆盖工具栏的默认样式以传递 propDisableGutters={true} ，就像我们在Material-ui Toolbar中所做的那样。这是我的代码

<MaterialTable

    // other props

components={{

          Toolbar: (props) => {

            return (

              <div>

                <MTableToolbar {...props} style={{paddingLeft:"0px"}}/>

              </div>

            );

          },

        }}

      />

但去除排水沟填充物并不起作用。我也尝试过<MTableToolbar {...props} disableGutters={true}/>但没有任何效果。

Answer 1

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({&nbsp; toolbarWrapper: {&nbsp; &nbsp; '& .MuiToolbar-gutters': {&nbsp; &nbsp; &nbsp; paddingLeft: 0,&nbsp; &nbsp; &nbsp; paddingRight: 0,&nbsp; &nbsp; }&nbsp; },});export default function App() {&nbsp; const classes = useStyles();&nbsp; return (&nbsp; &nbsp; <MaterialTable&nbsp; &nbsp; &nbsp; title="Toolbar Overriding Preview"&nbsp; &nbsp; &nbsp; columns={[&nbsp; &nbsp; &nbsp; &nbsp; { title: 'Name', field: 'name' },&nbsp; &nbsp; &nbsp; &nbsp; { title: 'Surname', field: 'surname' },&nbsp; &nbsp; &nbsp; &nbsp; { title: 'Birth Year', field: 'birthYear', type: 'numeric' },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'Birth Place',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; field: 'birthCity',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ]}&nbsp; &nbsp; &nbsp; data={[&nbsp; &nbsp; &nbsp; &nbsp; { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },&nbsp; &nbsp; &nbsp; &nbsp; { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },&nbsp; &nbsp; &nbsp; ]}&nbsp; &nbsp; &nbsp; components={{&nbsp; &nbsp; &nbsp; &nbsp; Toolbar: props => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={classes.toolbarWrapper}><MTableToolbar {...props} /></div>&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; />&nbsp; )}替代解决方案：还有另一种方法可以使用您自己的标题而不是覆盖原始标题。您必须复制道具才能隐藏默认标题并显示您自己的标题。Grid与 一起使用MTableToolbar，以便它们仍然彼此相邻。这是代码：import React from 'react';import MaterialTable, { MTableToolbar } from 'material-table';import { Grid } from '@material-ui/core';export default function App() {&nbsp; return (&nbsp; &nbsp; <MaterialTable&nbsp; &nbsp; &nbsp; title="Toolbar Overriding Preview"&nbsp; &nbsp; &nbsp; columns={[&nbsp; &nbsp; &nbsp; &nbsp; { title: 'Name', field: 'name' },&nbsp; &nbsp; &nbsp; &nbsp; { title: 'Surname', field: 'surname' },&nbsp; &nbsp; &nbsp; &nbsp; { title: 'Birth Year', field: 'birthYear', type: 'numeric' },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'Birth Place',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; field: 'birthCity',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ]}&nbsp; &nbsp; &nbsp; data={[&nbsp; &nbsp; &nbsp; &nbsp; { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },&nbsp; &nbsp; &nbsp; &nbsp; { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },&nbsp; &nbsp; &nbsp; ]}&nbsp; &nbsp; &nbsp; components={{&nbsp; &nbsp; &nbsp; &nbsp; Toolbar: props => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // This will let you use your own Title while keeping the search&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const propsCopy = { ...props };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Hide default title&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; propsCopy.showTitle = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid container direction="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid item xs={6}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Your Own Title</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid item xs={6}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MTableToolbar {...propsCopy} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; />&nbsp; )}