inovua React 数据网格-更改默认字体大小

Question

我正在开发一个使用 React Data Grid (inovua) 的项目，但我在他们的 API 参考页面或网上找不到任何关于如何更改默认字体大小的文档单元格内的数据。

我试图在每个 cell/column 中放入大量文本，但我没有足够的 space 用于大网格，因此文本需要更小。

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

我刚刚更改了 official documentation 中的示例：

import React, { useState } from 'react'

import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import CheckBox from '@inovua/reactdatagrid-community/packages/CheckBox'

import people from './people'

const gridStyle = { minHeight: 550, fontSize: 20 } // <-- look here

const rowStyle = ({ data }) => {
  const colorMap = {
    ca: '#7986cb',
    uk: '#ef9a9a'
  }

  return {
    fontSize: 10, // <-- or here
    color: colorMap[data.country]
  }
}

const columns = [
  { name: 'id', header: 'Id', defaultWidth: 100, type: 'number' },
  { name: 'name', header: 'Name', flex: 1 },
  { name: 'country', header: 'Country', flex: 1 },
  { name: 'city', header: 'City', flex: 1 },
  { name: 'age', header: 'Age', defaultWidth: 150, type: 'number' }
];

const App = () => {
  const [showZebraRows, setShowZebraRows] = useState(true);

  return (
    <div>
      <h3>Customized row styling - Canada rows are in twilight font color, UK rows in pink</h3>
      <CheckBox
        style={{ marginBottom: 20 }}
        checked={showZebraRows}
        onChange={setShowZebraRows}
      >
        Show zebra rows.
      </CheckBox>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        rowStyle={rowStyle}
        columns={columns}
        showZebraRows={showZebraRows}
        dataSource={people}
      />
    </div>
  );
}

export default () => <App />

另请阅读this :)

inovua React 数据网格-更改默认字体大小

inovua react data grid- change default font size

reactjs

react-data-grid