居中对齐 material-table 的搜索输入

Question

我只是想弄清楚如何将 Material-table 的搜索输入居中对齐。

<MaterialTable
  columns={[
    { title: "Type", field: "type" },
    { title: "Name", field: "name" },
    { title: "Status", field: "status" }
  ]}
  data={[
    { type: "user", name: "John Doe", status: "active" },
    { type: "user", name: "Lorem Ipsum", status: "active" }
  ]}
  options={{
    searchFieldAlignment: "right"
  }}
/>

我已经查看了文档 (https://material-table.com/#/docs/features/search) 我知道你可以设置“searchFieldAlignment”，但它只适用于“左”或“右”。我还尝试通过将其位置设置为 'absolute' 来更改“options.searchFieldStyle”，但它似乎被包裹在相对元素中。所以也没有让它起作用。

可能必须进行一些组件覆盖，但不确定它会是什么样子。

这里的示例代码：https://codesandbox.io/s/material-table-forked-lqs7z?file=/src/AppTable.js:120-513

Answer 1

MaterialTable 有一个道具 components，它允许您覆盖组件 docs。这是一个例子：

 components={{
        Toolbar: (props) => (
          <div
            style={{
              display: "flex",
              justifyContent: "center"
            }}
          >
            <MTableToolbar {...props} />
          </div>
        )
      }}

居中对齐 material-table 的搜索输入

Center align the search input of material-table

reactjs

material-ui

material-table