时间戳

首页 > 解决方案 > 更改 React Material-UI DataGrid（表格）默认字体大小

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

问题描述

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

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

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

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

继承自 div： .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/>组件中......

标签： reactjsdatagridmaterial-uifont-size

解决方案

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

隔离 CSS 问题。

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

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

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

推荐阅读