更改 React Material-UI DataGrid (table) 默认字体大小

Question

使用 Material-UI DataGrid，表格中的默认字体太小，看不到文字。

我的代码实际上是他们在页面上的演示的复制/粘贴：

https://material-ui.com/components/data-grid/

我的字体在表格中非常小。 不使用 Mui（菜单等）的页面的其余部分很好。 在 Firefox 开发工具检查器中我看到

继承自 div: .MuiDataGrid-root { font-size: 0.875rem; } .MuiDataGrid-root { font-size: 0.875rem; }

在浏览器工具中将其更改为 10px 之类的值，或完全禁用它，确认这就是需要更改的值。 它在编译时自动添加到末尾（内联），因此它会覆盖我以前的样式。 愚蠢的是，我找不到要添加的位置。

我已经使用同一张表作为示例查看了几个站点，但没有一个站点存在此问题。 有人可以启发我在哪里看，如何修复默认字体大小不正确的表格？

我有这些相关的位：

包.json：

"@material-ui/core": "^4.11.0",
"@material-ui/data-grid": "^4.0.0-alpha.6",
"fontsource-roboto": "^3.0.3",

索引.html

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

缩写 .jsx 代码：

import React from 'react';
import { DataGrid } from '@material-ui/data-grid';

const DemoTableMui = () => {
...

 const columns = [{ field: 'id', headerName: 'ID', width: 70 } ]
 const rows = [{ id: 1, lastName: 'Smith', firstName: 'Jon', age: 35 } ]


  return (
    <div style={{ height: 600, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  );
};

export default DemoTableMui

由于开发工具表明它是从 div 继承的，所以我做了以下事情：

  return (
    <div style={{ height: 600, width: '100%', fontSize:25 }}>
    ...

但没有任何效果。 我确定它所指的 div 被埋在<DataGrid/>组件中......

Answer 1

根据 OP 反馈，在此处提供答案。

隔离 CSS 问题。

• 如果您使用的是主题，请从具有 DIV 根的文件开始。 这就是包括样式的地方。
• 开始查看影响的特定 CSS 类，而不是更改值 - 正如您已经看到的那样，这将不起作用。
• 复制 CSS 类，给它一个不同的名称，并设置所需的值，然后使用这个新类。

或者（基于评论中的 OP 更新）

• 考虑放弃任何主题的使用，只需使用标准主题，例如引导程序（或反应带，如果您使用的是 react js），则不会有这些问题。
• 主题往往混合了原生组件和标准组件。 在大多数情况下，它们将有两个文件夹。 一个用于引导 css 文件，另一个用于主题 css 文件。
• 除非您已经熟悉该主题，否则进行更改可能会变得棘手。 使用标准引导程序组件，这些组件使用标准化名称，因此没有复杂性。

Answer 2

所以使用material-UI IMO 的最佳方式是在根级别自定义主题，然后所有组件都应该以统一的方式继承样式。 这就是我的 App.tsx 的样子

import {
  createMuiTheme,
  MuiThemeProvider
} from "@material-ui/core/styles";

const theme = createMuiTheme({
  palette: {
    type: 'dark'
  },
  typography: {
    fontSize: 12
  },
  // overrides: {
  //   MuiTypography: {
  //     colorInherit:{
  //       color: "#fff"
  //     }
  //   }
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <LeadPage/>
    </MuiThemeProvider>
  );
}

export default App;

设置排版将渗透到.MuiDataGrid-root类。 我把调色板留在了那里，它改变了网格的字体颜色，注释掉的代码是在主题级别覆盖类的一个例子，以防您需要进一步调整该网格。 我的例子是，如果您在调试器中看到.MuiTypography-colorInherit 。

Answer 3

import { MuiThemeProvider } from "@material-ui/core/styles";

...

import { createTheme } from '@material-ui/core';
export const muiTheme = createTheme({
  typography: {
    fontFamily: 'Poppins Regular',
  },
});

...

<MuiThemeProvider theme={muiTheme}>...</MuiThemeProvider>