reactjs - React DataTable 无法更改字体大小

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

你能试试这个吗

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

主题reference来源file

如果你想改变单个单元格的字体大小，你可以这样做

const columns = [
      {
        name: 'Title',
        selector: 'title',
        sortable: true,
        cell: row => <div style={{fontSize: 25}}>{row.title}</div>
      }]