如何在 MTableToolbar 上应用 disableGutters 道具？

Question

我正在使用 React material-table and want to override default styles of toolbar to pass the prop disableGutters={true} as we can do in 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({
  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>
          );
        }
      }}
    />
  )
}

如何在 MTableToolbar 上应用 disableGutters 道具？

How to apply disableGutters props on MTableToolbar?

javascript

reactjs

material-ui

material-table