造型材料表（特別是高度）

Question

我正在使用來自材料 UI 的材料表從這里做出反應，我無法弄清楚如何正確設置表格的樣式，尤其是行的高度。 我已經嘗試了文檔中解釋的所有方法，或者完全嘗試了，但沒有任何效果。 但似乎有什么東西優先於我的 css。 其中一些 CSS 道具確實有效果（如 textAlign 和垂直對齊），但大多數沒有。 我在這里想念什么？

我也直接覆蓋了一些css，沒有任何效果

tr {
  height: 100px;

}

tr td {
   height: auto !important;
    overflow:scroll;
}

MuiTableRow-root.{
  height:50px;
  max-height:50px;
}

這是我的代碼：

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}
      }}
      />

最后計算出的 css

Answer 1

嘗試使用 cellStyle 屬性設置單元格樣式，例如：

const cellStyle = {
  padding: '0 14px',
};

const [state, setState] = React.useState<TableState>({
  columns: [
    { title: 'ID', field: 'id', cellStyle }...
  ]
...
})