title: styling material-table (specifically height)
body: <p>I'm using material table from material UI react <a href="https://material-table.com/#/docs/features/styling" rel="nofollow noreferrer">from here</a> 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 ?</p>
  
  <p>I also overrode some css directly, without any effect</p>
  
  <pre><code>tr {
    height: 100px;
  
  }
  
  tr td {
     height: auto !important;
      overflow:scroll;
  }
  
  MuiTableRow-root.{
    height:50px;
    max-height:50px;
  }
  </code></pre>
  
  <p>here's my code:</p>
  
  <pre><code>let columns = [];
  //console.log(this.props.data.matrix[0][0])
  for(var i=0;i&lt;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(
    &lt;div&gt;
       &lt;a className="anchor" id={this.props.id}&gt;&lt;/a&gt;
        &lt;div className="centeringDiv"&gt;&lt;h3&gt;{this.props.title}&lt;/h3&gt;&lt;/div&gt;
          {this.props.infoText &amp;&amp; &lt;SectionInfo infoText = {this.props.infoText} /&gt;}      
        &lt;div style={{ maxWidth: '100%',marginTop:15}}&gt;          
        &lt;MaterialTable
          columns={columns}
          data={this.props.dataToDisplay}
          title={''}     
          onRowClick={((evt, selectedRow) =&gt; this.setState({ selectedRow }))}
          options={{
            pageSize:pageSizeCalc,
            maxBodyHeight:400,
            paging:true,
            filtering:this.props.filtering,
            pageSizeOptions: pageSizeOptionsCalc,                      
            //fixedColumns: {left: 1},  
            rowStyle: rowData =&gt; ({backgroundColor: (this.state.selectedRow &amp;&amp; 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}
        }}
        /&gt;
  </code></pre>
  
  <p>finally the computed css 
  <a href="https://i.stack.imgur.com/gontk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gontk.png" alt="enter image description here"></a></p>