styling material-table (specifically height) - css

Question

I'm using material table from material UI react from here and I can't figure out how to style the table properly, especially the height of rows.
I've tried all the ways explained in doc, alternatively and altogether and nothing makes it.
But there seems to be something somewhere that takes precedence over my css. Some of these CSS prop do have effects (like textAlign and vertical align), but most don't.
What am I missing here ?
I also overrode some css directly, without any effect
tr {
height: 100px;
}
tr td {
height: auto !important;
overflow:scroll;
}
MuiTableRow-root.{
height:50px;
max-height:50px;
}
here's my code:
let columns = [];
//console.log(this.props.data.matrix[0][0])
for(var i=0;i<this.props.headers.length;i++){
let filtering = false;
let obj = {'title':this.props.headers[i].display,'field':this.props.headers[i].accessor,headerStyle: {
backgroundColor: '#315481',
color: '#FFF',
},cellStyle:{maxHeight:50,height:50,overflow:'scroll',padding:1}}
columns.push(obj)
}
return(
<div>
<a className="anchor" id={this.props.id}></a>
<div className="centeringDiv"><h3>{this.props.title}</h3></div>
{this.props.infoText && <SectionInfo infoText = {this.props.infoText} />}
<div style={{ maxWidth: '100%',marginTop:15}}>
<MaterialTable
columns={columns}
data={this.props.dataToDisplay}
title={''}
onRowClick={((evt, selectedRow) => this.setState({ selectedRow }))}
options={{
pageSize:pageSizeCalc,
maxBodyHeight:400,
paging:true,
filtering:this.props.filtering,
pageSizeOptions: pageSizeOptionsCalc,
//fixedColumns: {left: 1},
rowStyle: rowData => ({backgroundColor: (this.state.selectedRow && this.state.selectedRow.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF',maxHeight:100}),
headerStyle:{height:60,maxHeight:60,padding:0,overflow:'none',lineHeight:1,textAlign:'center',fontSize:'2.5vh'},
cellStyle:{height:100,overflowY:'scroll',verticalAlign:'top',fontSize:'2vh',overflow:'scroll',padding:1}
}}
/>
finally the computed css

Answer 1

Try to style cell with cellStyle property like:
const cellStyle = {
padding: '0 14px',
};
const [state, setState] = React.useState<TableState>({
columns: [
{ title: 'ID', field: 'id', cellStyle }...
]
...
})