React material-table - 中心 table 标题

Question

我在我的 React 项目中使用 material-table。

如何让 table 标题居中？

这是codesandbox的例子：

https://codesandbox.io/s/silly-hermann-6mfg4?file=/src/App.js

我想让标题“平均费用率”居中：

我尝试使用 textAlign:"center" 向 MaterialTable 添加样式道具，但它不起作用。甚至可以做到吗？

Answer 1

如果需要，您可以覆盖工具栏组件并提供自定义标题反应组件。

import "./styles.css";
import MaterialTable, { MTableToolbar } from "material-table";
import Typography from "@material-ui/core/Typography";

const MyNewTitle = ({ text, variant }) => (
  <Typography
    variant={variant}
    style={{
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis"
    }}
  >
    {text}
  </Typography>
);
export default function App() {
  const softRed = "#CC6666";

  //GREENS

  const forestgreen = "#556B2F";
  const limegreen = "#228B22";
  const lightgreen = "#3CB371";

  //ORANGES
  const softOrange = "#ffd27f";

  return (
    <div className="App">
      <MaterialTable
        style={{}}
        title={<MyNewTitle variant="h6" text="Average Expense Ratio" />}
        components={{
          Toolbar: (props) => (
            <div
              style={{
                alignItems: "center",
                justifyContent: "center",
                display: "flex"
              }}
            >
              <MTableToolbar {...props} />
            </div>
          )
        }}
        columns={[
          {
            title: "0.19 and below",
            field: "first",

            headerStyle: {
              backgroundColor: forestgreen
            }
          },
          {
            title: "0.20 to 0.48",
            field: "first",
            headerStyle: {
              backgroundColor: limegreen
            }
          },
          {
            title: "0.49 to 0.77",
            field: "first",
            headerStyle: {
              backgroundColor: lightgreen
            }
          },
          {
            title: "0.78 to 1.06",
            field: "first",
            headerStyle: {
              backgroundColor: softOrange
            }
          },
          {
            title: "1.07 and above",
            field: "first",
            headerStyle: {
              backgroundColor: softRed
            }
          }
        ]}
        data={[]}
        options={{
          headerStyle: {
            color: "#FFF",
            textAlign: "center",
            whiteSpace: "nowrap",
            fontSize: 10
          },

          paging: false,
          search: false,
          sorting: false,
          showEmptyDataSourceMessage: false
        }}
      />
    </div>
  );
}

React material-table - 中心 table 标题

React material-table - center table title

javascript

css

reactjs

material-ui

material-table