Question

我正在使用来自材料界面UI from here的材料表，但无法弄清楚如何正确设置表格的样式，尤其是行的高度。我已经尝试了文档中解释的所有方法，或者完全替代了，没有任何结果。但是似乎有些地方要比我的CSS优先。这些CSS道具中的某些确实具有效果（例如textAlign和Vertical align），但大多数没有。我在这里想念什么？

我也直接覆盖了一些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 }...
  ]
...
})

样式材料表（特别是高度）

1 个答案: