React - 如何更改Material ui的DataTable组件属性的语言？

Question

我正在使用名为 DataTable 的 Material ui 组件，问题是过滤器字段是英语，我想知道是否有任何方法可以将其语言更改为葡萄牙语

下面是我的组件代码：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { PropTypes } from 'prop-types';

export default function DataTable({ rows, columns }) {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

DataTable.propTypes = {
  rows: PropTypes.arrayOf(
    PropTypes.shape({
      conteudo: PropTypes.string,
      disciplina: PropTypes.string,
      curso: PropTypes.string,
      data: PropTypes.string,
    })
  ).isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  columns: PropTypes.array.isRequired,
};

我想将“取消排序、按描述排序、过滤、隐藏...”翻译为英语

Answer 1

DataGrid您可以通过将localeText对象属性传递给DataGrid以下内容来本地化任何文本标签：

\n

import { useState } from "react";\nimport { DataGrid } from "@mui/x-data-grid";\n\nconst localizedTextsMap = {\n  columnMenuUnsort: "n\xc3\xa3o classificado",\n  columnMenuSortAsc: "Classificar por ordem crescente",\n  columnMenuSortDesc: "Classificar por ordem decrescente",\n  columnMenuFilter: "Filtro",\n  columnMenuHideColumn: "Ocultar",\n  columnMenuShowColumns: "Mostrar colunas"\n};\n\nexport default function DataTable({ rows, columns }) {\n  const [finalClickInfo, setFinalClickInfo] = useState(null);\n\n  const handleOnCellClick = (params) => {\n    setFinalClickInfo(params);\n  };\n\n  return (\n    <div style={{ height: 400, width: "100%" }}>\n      <DataGrid\n        rows={rows}\n        columns={columns}\n        pageSize={5}\n        rowsPerPageOptions={[5]}\n        checkboxSelection\n        onCellClick={handleOnCellClick}\n        localeText={localizedTextsMap}\n      />\n      {finalClickInfo &&\n        `Final clicked id = ${finalClickInfo.id}, \n        Final clicked field = ${finalClickInfo.field}, \n        Final clicked value = ${finalClickInfo.value}`}\n      {!finalClickInfo && `Click on a column`}\n    </div>\n  );\n}\n

\n

此处列出了所有可以本地化的键。\n您可以查看此 stackblitz以获取此用法的实时工作示例。

\n

Answer 2

对于我们使用 MUI Data Grid 版本 == 5.17.9 进行的 TypeScript 安装，需要稍微不同的区域设置文本路径。

import { DataGrid, ptBR } from '@mui/x-data-grid'


<DataGrid
  localeText={ptBR.components.MuiDataGrid.defaultProps.localeText}
/>

您可以在此处检查翻译状态： https ://mui.com/x/react-data-grid/localization/#supported-locales