Reactjs 如何在React js中居中对齐MUIDataTable的标题

我正在使用MUIDatable，但我无法将标题居中。我需要将标题垂直和水平居中。请有人能帮我：

我正在尝试使用此代码，但不起作用：

 columns: [{
      name: <strong>#</strong>,
      options: {
        filter: false,
        download: false,
        print: false,
      }
    },
    { name: <strong>Empresa</strong>, options: { align: "center"} },
    { name: <strong>Ruc</strong>, options: { align: "center"} },
    { name: <strong>Fecha</strong>, options: { align: "center"} },
    { name: <strong>Usuario Aginado</strong>, options: { align: "center"} },
    { name: <strong>Usuario Ediccion</strong>, options: { align: "center"} },
    { name: <strong>Indicador</strong>, options: { align: "center"} },
    { name: <strong>Objetivo</strong>, options: { align: "center"} },
    { name: <strong>Estado</strong>, options: { align: "center"} },
    { name: <strong>Tiempo Excedido</strong>, options: { align: "center"} },
    {
      name: <strong><i className="zmdi zmdi-edit"></i></strong>,
      options: {
        filter: false,
        download: false,
        print: false
      }
    }
  ],

列：[{
名称：#，
选项：{
筛选器：false，
下载：错，
印刷品：假，
}
},
{name:Empresa，选项：{align:“center”}，
{name:Ruc，选项：{align:“center”}，
{name:Fecha，选项：{align:“center”}，
{name:Usuario Aginado，选项：{align:“center”}，
{name:通常的法令，选项：{align:“center”}，
{name:indicator，选项：{align:“center”}，
{name:Objetivo，选项：{align:“center”}，
{name:Estado，选项：{align:“center”}，
{name:Tiempo Excedido，选项：{align:“center”}，
{
名称：，
选项：{
筛选器：false，
下载：错，
印刷品：假
}
}
],

---

请检查此示例：

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

export default class MuiDatatable extends React.Component {
    render() {
        const columns = [
            {
                label: "Name",
                name: "Name",
                options: {
                    filter: true,
                    customHeadRender: (columnMeta, updateDirection) => (
                        <th key={1} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
                            {columnMeta.name}
                        </th>
                    )
                }
            },
            {
                label: "Title",
                name: "Title",
                options: {
                    filter: true,
                    sortDirection: 'asc',
                    customHeadRender: (columnMeta, updateDirection) => (
                        <th key={2} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
                            {columnMeta.name}
                        </th>
                    )
                }
            },
            {
                name: "Location",
                options: {
                    filter: false,
                    customHeadRender: (columnMeta, updateDirection) => (
                        <th key={3} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
                            {columnMeta.name}
                        </th>
                    )
                }
            },
            {
                name: "Age",
                options: {
                    filter: true,
                    sort: false,
                    customHeadRender: (columnMeta, updateDirection) => (
                        <th key={4} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
                            {columnMeta.name}
                        </th>
                    )
                }
            },
            {
                name: "Salary",
                options: {
                    filter: true,
                    sort: false,
                    customHeadRender: (columnMeta, updateDirection) => (
                        <th key={5} onClick={() => updateDirection(2)} style={{cursor: 'pointer'}}>
                            {columnMeta.name}
                        </th>
                    )
                }
            }
        ];
        const data = [
            ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
            ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"]
        ];

        const options = {
            selectableRows: "none"
        };

        return (
            <MUIDataTable
                title={"ACME Employee list"}
                data={data}
                columns={columns}
                options={options}
            />
        );
    }
}

从“React”导入React；
从“react dom”导入react dom；
从“mui数据表”导入MUIDataTable；
导出默认类MuiDatatable扩展React.Component{
render（）{
常量列=[
{
标签：“姓名”，
姓名：“姓名”，
选项：{
过滤器：对，
customHeadRender:（columnMeta，updateDirection）=>(
updateDirection（2）}style={{cursor:'pointer'}}>
{columnMeta.name}
)
}
},
{
标签：“标题”，
姓名：“职务”，
选项：{
过滤器：对，
sortDirection:'asc'，
customHeadRender:（columnMeta，updateDirection）=>(
updateDirection（2）}style={{cursor:'pointer'}}>
{columnMeta.name}
)
}
},
{
名称：“地点”，
选项：{
筛选器：false，
customHeadRender:（columnMeta，updateDirection）=>(
updateDirection（2）}style={{cursor:'pointer'}}>
{columnMeta.name}
)
}
},
{
姓名：“年龄”，
选项：{
过滤器：对，
排序：假，
customHeadRender:（columnMeta，updateDirection）=>(
updateDirection（2）}style={{cursor:'pointer'}}>
{columnMeta.name}
)
}
},
{
姓名：“工资”，
选项：{
过滤器：对，
排序：假，
customHeadRender:（columnMeta，updateDirection）=>(
updateDirection（2）}style={{cursor:'pointer'}}>
{columnMeta.name}
)
}
}
];
常数数据=[
[“Gabby George”，“业务分析师”，“明尼阿波利斯”，30，“100000美元]，
[“艾登·劳埃德”，“商业顾问”，“达拉斯”，55，“$200000”]
];
常量选项={
selectableRows：“无”
};
返回(
);
}
}

我只在jss中添加了以下代码以使页眉居中：

MUIDataTableHeadCell: {
  toolButton: {
    justifyContent: 'center'
  },
},

MUIDataTableHeadCell: {
  toolButton: {
    justifyContent: 'center'
  },
},