Material-table #1204 -如何自定义Groupbar中的字体，react js - Material表中的分页

/* 在样式文件中自定义Groupbar中的字体 */
.groupbar {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

import MaterialTable from 'material-table';

const MyTable = () => {
  const [data, setData] = useState([]);
  
  const columns = [
    { title: 'Name', field: 'name' },
    { title: 'Age', field: 'age', type: 'numeric' },
    { title: 'City', field: 'city' },
  ];
  
  return (
    <MaterialTable
      title="My Table"
      columns={columns}
      data={data}
      options={{
        paging: true, // 显示分页
        pageSize: 10, // 每页显示的行数
        pageSizeOptions: [10, 20, 50], // 可选的每页显示行数
        paginationType: 'normal', // 分页样式，可选的值有 'normal', 'stepped'
      }}
      localization={{
        body: {
          emptyDataSourceMessage: 'No records to display', // 数据为空时显示的文本
          addTooltip: 'Add', // 添加记录的提示文本
          deleteTooltip: 'Delete', // 删除记录的提示文本
          editTooltip: 'Edit', // 编辑记录的提示文本
          filterRow: {
            filterTooltip: 'Filter', // 过滤器的提示文本
          },
        },
        pagination: {
          labelRowsSelect: 'rows', // 每页显示行数的选项的文本
          labelDisplayedRows: '{from}-{to} of {count}', // 当前显示的行数信息的模板文本
          firstTooltip: 'First Page', // 首页的提示文本
          previousTooltip: 'Previous Page', // 上一页的提示文本
          nextTooltip: 'Next Page', // 下一页的提示文本
          lastTooltip: 'Last Page', // 尾页的提示文本
        },
      }}
    />
  );
};