Javascript DevExtreme反应网格

有人知道如何在DevExtreme React网格中更改TableHeaderRow的字体大小吗

下面是我一直在使用的网站（）中的一个代码示例

import*as React from'React'；
进口{
排序状态、编辑状态、分页状态、，
集成分页、集成排序、，
}来自“@devexpress/dx反应网格”；
进口{
网格，
Table，TableHeaderRow，TableEditRow，TableEditColumn，
PagingPanel、DragDropProvider、TableColumnReordering、，
}来自“@devexpress/dx react grid material ui”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/Input”导入输入；
从“@material ui/core/Select”导入Select；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/icons/Edit”导入EditIcon；
从“@material ui/icons/Save”导入SaveIcon；
从“@material ui/icons/Cancel”导入CancelIcon；
从“@material ui/core/styles”导入{withStyles}”；
从“../../../theme sources/material ui/components/ProgressBar cell”导入{ProgressBarCell}；
从“../../../theme sources/material ui/components/HighlightedCell”导入{HighlightedCell}；
从“../../../theme sources/material ui/components/currency type provider”导入{CurrencyTypeProvider}；
从“../../../theme sources/material ui/components/percent type provider”导入{PercentTypeProvider}；
进口{
generateRows，
全球价值观，
}来自“../../../demo data/generator”；
常量样式=主题=>({
lookupEditCell：{
paddingTop:theme.space.unit*0.875，
paddingRight:theme.spating.unit，
paddingLeft:theme.spating.unit，
},
对话框：{
宽度：“计算（100%-16px）”，
},
输入根：{
宽度：“100%”，
},
});
常量AddButton=（{onExecute}）=>(
新的
);
const EditButton=（{onExecute}）=>(
);
constdeletebutton=（{onExecute}）=>(
);
const CommitButton=（{onExecute}）=>(
);
const CancelButton=（{onExecute}）=>(
);
常量命令组件={
add:AddButton，
编辑：编辑按钮，
删除：删除按钮，
提交：提交按钮，
取消：取消按钮，
};
const命令=（{id，onExecute}）=>{
const CommandButton=commandComponents[id]；
返回(
);
};
常量可用值={
产品：globalSalesValues.product，
region:globalSalesValues.region，
客户：globalSalesValues.customer，
};
常量LookupEditCellBase=({
availableColumnValues、value、onValueChange、类、，
}) => (
onValueChange（event.target.value）}
输入={(
)}
>
{availableColumnValues.map（项=>(
{item}
))}
);
export const LookupEditCell=with样式（样式，{name:'ControlledModeDemo'}）（LookupEditCellBase）；
常量单元格=（道具）=>{
const{column}=props；
如果（column.name==‘折扣’）{
返回；
}
如果（column.name==‘金额’）{
返回；
}
返回；
};
const EditCell=（道具）=>{
const{column}=props；
const availableColumnValues=availableValues[column.name]；
如果（可用列值）{
返回；
}
返回；
};
const getRowId=row=>row.id；
类DemoBase扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
栏目：[
{名称：'产品'，标题：'产品'}，
{name:'region'，title:'region'}，
{名称：'金额'，标题：'销售金额'}，
{名称：'折扣'，标题：'折扣'}，
{名称：'saleDate'，标题：'saleDate'}，
{名称：'客户'，标题：'客户'}，
],
tableColumnExtensions：[
{columnName:'amount'，align:'right'}，
],
行：generateRows({
columnValues:{id:（{index}）=>index，…globalSalesValues}，
长度：12，
}),
排序：[]，
EditingRowId:[]，
附录：[]，
行更改：{}，
当前页面：0，
删除行：[]，
页面大小：0，
页面大小：[5,10,0]，
columnOrder:[“产品”、“地区”、“金额”、“折扣”、“销售日期”、“客户”]，
currencyColumns:[“金额”]，
百分比列：[“折扣”]，
};
常量getStateDeletingRows=（）=>{
const{deletingRows}=this.state；
返回删除行；
};
常量getStateRows=（）=>{
const{rows}=this.state；
返回行；
};
this.changeSorting=sorting=>this.setState（{sorting}）；
this.changeEditingRowIds=editingRowIds=>this.setState（{editingRowIds}）；
this.changeAddedRows=addedRows=>this.setState({
addedRows:addedRows.map（行=>（Object.keys（行）.length？行：{
金额：0，
折扣：0，
saleDate:new Date（）.toISOString（）.split（'T'）[0]，
product:availableValues.product[0]，
区域：可用值。区域[0]，
客户：可用价值。客户[0]，
})),
});
this.changeRowChanges=rowChanges=>this.setState（{rowChanges}）；
this.changeCurrentPage=currentPage=>this.setState（{currentPage}）；
this.changePageSize=pageSize=>this.setState（{pageSize}）；
this.commitChanges=（{添加、更改、删除}）=>{
设{rows}=this.state；
如有(新增){
const startingAddedId=rows.length>0？rows[rows.length-1]。id+1:0；
行=[
…行，
…添加了.map（（行，索引）=>({
id:startingAddedId+索引，
一行
})),
];
}
如果（更改）{
rows=rows.ma
<TableHeaderRow cellComponent={this.ExampleHeaderCell} />

 ExampleHeaderCell = (props: any) => (<TableHeaderRow.Cell
                className={exampleClass}
                {...props}
                key={column.name}
                getMessage={() => column.title}
            />)

ExampleHeaderCells = (props: any) => {
    const exampleClass = css({ backgroundColor: "blue" })
    const { column } = props
    if (column.name === "name") {
        return (
            <TableHeaderRow.Cell
                className={exampleClass}
                {...props}
                key={column.name}
                getMessage={() => column.title}
            />
        )
    }
    return <TableHeaderRow.Cell {...props} key={column.name} getMessage={() => column.title} />
}