материал для укладки стола (в частности, высота)

Question

Я использую таблицу материалов из пользовательского интерфейса материала отсюда , и я не могу понять, как правильно оформить таблицу, особенно высоту строк. Я перепробовал все способы, описанные в do c, альтернативно и в целом, и ничего не получается. Но, кажется, что-то где-то имеет преимущество перед моим css. Некоторые из этих CSS prop имеют эффекты (например, 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 }...
  ]
...
})