如何在 MTableToolbar 上应用 disableGutters 道具?

我正在使用 react material-table 并希望覆盖工具栏的默认样式以传递道具 disableGutters={true} ,就像我们在 material-ui toolbar 中所做的那样。这是我的代码

<MaterialTable
    // other props
components={{
          Toolbar: (props) => {
            return (
              <div>
                <MTableToolbar {...props} style={{paddingLeft:"0px"}}/>
              </div>
            );
          },
        }}
      />

但它不能删除排水沟填充。我也试过 <MTableToolbar {...props} disableGutters={true}/> 但没有任何效果。

stack overflow How to apply disableGutters props on MTableToolbar?
原文答案
author avatar

接受的答案

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>
        ),
      }}
    />
  )
}

替代解决方案:

还有另一种方法可以使用自己的标题,而不是覆盖原来的标题。

您必须复制道具以隐藏默认标题并显示您自己的。

GridMTableToolbar 一起使用,这样它们仍然彼此相邻。

这是代码:

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>
          );
        }
      }}
    />
  )
}

答案: