【问题标题】:Material table for react font size is way too small反应字体大小的材料表太小了
【发布时间】:2025-12-21 06:15:06
【问题描述】:

我是一个新手,在我的项目中使用 react,使用过的材料表

不过我喜欢的字体太小了,图片附在下面 我想增加表格的字体大小。

这里是代码

state = {
      columns: [
        { title: "ID", field: "id", type: "numeric" },
        { title: "Title", field: "title" },
        { title: "Active", field: "active", type: "boolean" },
        { title: "# Questions", field: "number_of_questions" }
      ],
      data: [
        { id: 1, title: "First Survey", active: true, number_of_questions: 9 },
        { id: 2, title: "Second Survey", active: false, number_of_questions: 8 }
      ]
    };
render() {
    return (
      <div className="example-box-wrapper">
        <div className="adjust example-box-wrapper">
          <div id="dynamic-table-example-1_wrapper">
            <MaterialTable
              title="All Surveys"
              columns={this.state.columns}
              data={this.state.data}
              editable={{
                onRowAdd: newData => this.addNew(newData),
                onRowUpdate: (newData, oldData) =>
                  this.update(newData, oldData),
                onRowDelete: oldData => this.delete(oldData)
              }}
            />
          </div>
        </div>
      </div>
    );
  }

请帮忙

【问题讨论】:

    标签: javascript reactjs datatable material-ui material-table


    【解决方案1】:
    <MaterialTable
      ...
      options={{
        rowStyle: {
          fontSize: 24,
        }
      }}
    />
    

    尝试添加 options 属性。有关其他样式选项,请参阅docs

    【讨论】:

    • @MuhammadSharif 用 cellStyle 和 headerStyle 替换 rowStyle