2

我第一次使用 ag-grid 表。我无法更改行单元格的默认字体大小（不是标题部分）。我想更改行单元格（行数据）的字体大小。我正在使用 ag-theme-alpine。

这是我正在使用的代码。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            columnDefs: [
                {headerName: 'Make', field: 'make'},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}

            ],
            rowData: [
                {make: 'Toyota', model: 'Celica', price: 35000},
                {make: 'Ford', model: 'Mondeo', price: 32000},
                {make: 'Porsche', model: 'Boxter', price: 72000}
            ]
        }
    }

    render() {
        return (
            <div
                className="ag-theme-alpine"
          style={{ height: '500px', width: '100%',fontSize:'20px' }}
            >
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}>
                </AgGridReact>
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));

请提出一个好的解决方案。

4

3 回答 3

3

您可以通过在 ColDef 中设置cellStyle属性来执行此操作ColDef。您可以按如下方式设置字体大小

columnDefs: [
                {
                  headerName: 'Make', 
                  field: 'make', 
                  cellStyle: {fontSize: '11px'}
                }
            ]
于 2021-10-25T15:48:09.830 回答
3

您可以通过 CSS 覆盖字体大小。Ag-Grid 的 CSS 在行级别设置字体，不幸的是它有一个 !important 标记。提供更高的选择器特异性应该可以解决问题：

div.ag-theme-alpine div.ag-row {
    font-size: 12px !important;
}
于 2020-10-15T11:29:49.750 回答
1

您可以通过自定义主题来全局设置字体大小和其他参数：React Data Grid: Customizing Themes

在 styles.scss 文件中定义样式参数，如下所示：

.ag-theme-alpine {
  @include ag-theme-alpine((        
      font-size: 10px,
  ));
}
于 2022-02-07T13:55:41.230 回答