javascript - 如何在 MTableToolbar 上应用 disableGutters 道具？

Question

我正在使用 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}/>，但没有任何效果。

标签： javascriptreactjsmaterial-uimaterial-table

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与 the一起使用，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>
          );
        }
      }}
    />
  )
}