S
Scott
Guest
Scott Asks: Change React Material-UI DataGrid (table) Default Font Size
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 Material UI (menu etc.) are fine. In Firefox dev tools Inspector I see
Inherited from div:
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:
Index.html
Abbreviated .jsx code:
Since the dev tool indicated it is inherited from div I did stuff like:
But nothing had effect. I'm sure the div it is referring to is buried down in the
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 Material UI (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:
Code:
"@material-ui/core": "^4.11.0",
"@material-ui/data-grid": "^4.0.0-alpha.6",
"fontsource-roboto": "^3.0.3",
Index.html
Code:
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
Abbreviated .jsx code:
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:
Code:
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...