如何在 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。然后按照下面的代码操作：

\n

import React from \'react\';\n\nimport MaterialTable, { MTableToolbar } from \'material-table\';\n\nimport { makeStyles } from \'@material-ui/core/styles\';\n\nconst useStyles = makeStyles({\n  toolbarWrapper: {\n    \'& .MuiToolbar-gutters\': {\n      paddingLeft: 0,\n      paddingRight: 0,\n    }\n  },\n});\n\nexport default function App() {\n\n  const classes = useStyles();\n\n  return (\n    <MaterialTable\n      title="Toolbar Overriding Preview"\n      columns={[\n        { title: \'Name\', field: \'name\' },\n        { title: \'Surname\', field: \'surname\' },\n        { title: \'Birth Year\', field: \'birthYear\', type: \'numeric\' },\n        {\n          title: \'Birth Place\',\n          field: \'birthCity\',\n          lookup: { 34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\' },\n        },\n      ]}\n      data={[\n        { name: \'Mehmet\', surname: \'Baran\', birthYear: 1987, birthCity: 63 },\n        { name: \'Zerya Bet\xc3\xbcl\', surname: \'Baran\', birthYear: 2017, birthCity: 34 },\n      ]}\n      components={{\n        Toolbar: props => (\n          <div className={classes.toolbarWrapper}><MTableToolbar {...props} /></div>\n        ),\n      }}\n    />\n  )\n}\n

\n

替代解决方案：

\n

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

\n

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

\n

Grid与 一起使用MTableToolbar，以便它们仍然彼此相邻。

\n

这是代码：

\n

import React from \'react\';\n\nimport MaterialTable, { MTableToolbar } from \'material-table\';\n\nimport { Grid } from \'@material-ui/core\';\n\nexport default function App() {\n\n  return (\n    <MaterialTable\n      title="Toolbar Overriding Preview"\n      columns={[\n        { title: \'Name\', field: \'name\' },\n        { title: \'Surname\', field: \'surname\' },\n        { title: \'Birth Year\', field: \'birthYear\', type: \'numeric\' },\n        {\n          title: \'Birth Place\',\n          field: \'birthCity\',\n          lookup: { 34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\' },\n        },\n      ]}\n      data={[\n        { name: \'Mehmet\', surname: \'Baran\', birthYear: 1987, birthCity: 63 },\n        { name: \'Zerya Bet\xc3\xbcl\', surname: \'Baran\', birthYear: 2017, birthCity: 34 },\n      ]}\n      components={{\n        Toolbar: props => {\n          // This will let you use your own Title while keeping the search\n          const propsCopy = { ...props };\n          // Hide default title\n          propsCopy.showTitle = false;\n          return (\n            <Grid container direction="row">\n              <Grid item xs={6}>\n                <h2>Your Own Title</h2>\n              </Grid>\n              <Grid item xs={6}>\n                <MTableToolbar {...propsCopy} />\n              </Grid>\n            </Grid>\n          );\n        }\n      }}\n    />\n  )\n}\n

\n