如何在 MTableToolbar 上应用disableGutters 属性？

Question

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

          );

        }

      }}

    />

  )

}