How to change default font size for ag-grid row cells in react js? - ag-grid-react

Question

I am using ag-grid table for first time. I am not able to change the default font size of row cells(Not header portion). I want to change the font size of row cells(row data). I am using ag-theme-alpine.
Here is the code which I am using.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
],
rowData: [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
]
}
}
render() {
return (
<div
className="ag-theme-alpine"
style={{ height: '500px', width: '100%',fontSize:'20px' }}
>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Please suggest a good solution.

Answer 1

You can do this in the ColDef by setting the cellStyle property in ColDef. You can set the font size as follows
columnDefs: [
{
headerName: 'Make',
field: 'make',
cellStyle: {fontSize: '11px'}
}
]

Answer 2

You can override the font size via CSS. Ag-Grid's CSS sets the font at the row level, and unfortunately it has an !important tag. Providing a higher selector specificity should do the trick:
div.ag-theme-alpine div.ag-row {
font-size: 12px !important;
}

Answer 3

You can set font-size and other parameters globally by customizing a theme: React Data Grid: Customising Themes
Define the style parameters in the styles.scss file like this:
.ag-theme-alpine {
#include ag-theme-alpine((
font-size: 10px,
));
}