Question

我在React应用程序上工作，并且有一个使用DataTable的组件（引用为here）。

默认字体大小看起来太小，所以我想进行更改以使其看起来更大。

我尝试按照下面的代码将样式设置为表格，但是它不起作用。

这是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import DataTable from 'react-data-table-component';

export default class MyTable2 extends React.Component {
  constructor(props) {
    super(props);

    const data = [];

    for (var i = 0; i < 200; i++) {
      data.push({ id: i, title: 'Conan the Barbarian' + i, summary: 'Orphaned boy Conan is enslaved after his village is destroyed...', year: '1982', expanderDisabled: true, image: 'http://conan.image.png' })
    }

    this.state = {
      rs: data
    }
  }


  render() {        
    const columns = [
      {
        name: 'Title',
        selector: 'title',
        sortable: true,
      },
      {
        name: 'Year',
        selector: 'year',
        sortable: true
      },
    ];

    const handleChange = (state) => {
      console.log('Selected Rows: ', state.selectedRows);
    };

    let styleobj = { "font-size": "25px" } //try to set the font-size here

    return (
      <DataTable
        className="dataTables_wrapper"
        title="Arnold Movies"
        columns={columns}
        data={this.state.rs}
        selectableRows // add for checkbox selection
        onTableUpdate={handleChange}
        pagination
        style={styleobj}
      />
    )
  }
}

这里有人可以建议我解决方案吗？

谢谢你。

Answer 1

您好，@ humanbean的答案是正确的，您可以修复内嵌阶梯，也可以根据需要直接在app.css中设置样式。

基于您的自定义类名（.dataTables_wrapper），我认为此CSS应该有效。

.dataTables_wrapper .rdt_TableCell{
  font-size:25px;
}

这是react-data-table-component使用的className

rdt_Table
rdt_TableRow
rdt_TableCol
rdt_TableCol_Sortable
rdt_TableCell
rdt_TableHeader
rdt_TableFooter
rdt_TableHead
rdt_TableHeadRow
rdt_TableBody
rdt_ExpanderRow

Answer 2

你能试试吗

System.currentTimeMillis()

主题reference 来源file

如果要更改单个单元格的字体大小，可以执行此操作

// Override the row font size
const myNewTheme= {
  rows: {
    fontSize: '25px'
  }
}

<DataTable
        className="dataTables_wrapper"
        title="Arnold Movies"
        columns={columns}
        data={this.state.rs}
        selectableRows // add for checkbox selection
        onTableUpdate={handleChange}
        pagination
        customTheme={myNewTheme}
      />

React DataTable无法更改字体大小

2 个答案: