Change React Material-UI DataGrid (table) Default Font Size

user_14380063 0
Viewed 9942

Using Material-UI DataGrid, the default font in table is too small to see text.

My code is literally a copy/paste of their demo on the page:

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

My fonts are very small in the table. Rest of page not using Mui (menu etc.) are fine. In Firefox dev tools Inspector I see

Inherited from div: .MuiDataGrid-root { font-size: 0.875rem; }

Changing that in the browser tool to something like 10px, or disabling it completely, confirms thats the value needing change. It's being automatically added at end (inline) when compiled so it overwrites my previous style. The silly thing is, I can't find where this is being added.

I've looked at several sites using this same table as examples and none have this issue. Can someone enlighten me where to look, how to fix the table having incorrect default font size?

I have these relevant bits:

package.json:

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

Index.html

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

Abbreviated .jsx code:

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

Since the dev tool indicated it is inherited from div I did stuff like:

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

But nothing had effect. I'm sure the div it is referring to is buried down in the <DataGrid/> component...

material-ui reactjs font-size datagrid
3 Answers

Based on OP feedback, putting an answer here.

Isolating the CSS problem.

  • if you are using a theme, start with the file that has the DIV root. That is where styles are included.
  • start looking the specific CSS class that is affecting, and instead of changing the value - which won't work as you have already seen.
  • Make a copy of the CSS class, give it a different name, and set the desired value and then use this new class.

Alternatively (based on the OP update in the comments)

  • Consider abandoning any usage of themes just use the standard themes such as bootstrap (or react strap, if you are on react js), which wont have these problems.
  • Themes tend to have a mix of native components and also standard components. In most cases, they will have two folders. one for bootstrap css files and another for theme css files.
  • Unless you are already experienced with the theme, making changes can become tricky. Use the standard bootstrap components, which use standardized names and hence, no complications.
user_53388880

So the best way to use material-UI IMO is to customize the theme at the root level, and then all of the components should inherit the styling in a uniform kind of way. This is what my App.tsx looks like

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;

Setting the typography will trickle down to the class .MuiDataGrid-root. I left the palette up there which changes the font color of the grid, and the commented out code is a an example of overriding the class at the theme level, in case you need to tweak that grid further. My example would be if you saw .MuiTypography-colorInherit in the debugger.

user_54935480 
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>
user_60820840
Related