更改 React Material-UI DataGrid（表格）默认字体大小答案

【问题标题】：Change React Material-UI DataGrid (table) Default Font Size更改 React Material-UI DataGrid（表格）默认字体大小
【发布时间】：2020-10-02 14:55:46
【问题描述】：

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

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

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

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

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

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

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

我有这些相关信息：

package.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/> 组件中......

【问题讨论】：

如果您使用的是主题，请从具有 DIV 根目录的文件开始。这就是包含样式的地方。开始查看正在影响的特定 CSS 类，而不是更改值 - 正如您已经看到的那样，这将不起作用，复制 CSS 类，给它一个不同的名称，并设置所需的值，然后使用这个新课程。
感谢您的回复。由于提到的值来自 MuiDataGrid 编译文件，我想知道是什么导致它实现该值。对我来说，似乎出于某种原因将视图解释为在移动设备上。它是 CSS 的最后一行，因此它不会被另一种样式覆盖（据我所知）。话虽如此，我最终放弃了 MUI 并选择了 Bootstrap。它“开箱即用”并满足了我的需求。再次感谢您的努力。 :)
如果它解决了你的问题，让我把它作为答案。它也会帮助其他人:)

标签： reactjs datagrid material-ui font-size

【解决方案1】：

根据 OP 反馈，在此给出答案。

隔离 CSS 问题。

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

或者（基于 cmets 中的 OP 更新）

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

【讨论】：

【解决方案2】：

所以使用material-UIIMO 的最佳方式是在根级别自定义主题，然后所有组件都应该以统一的方式继承样式。这就是我的 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。

【讨论】：

【解决方案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>

【讨论】：