如何更改 Sencha Extreact Grid 产品的样式（如果有摘要行，则为字体颜色）

Question

我无法更改 Sencha Extreact 网格中的样式。

例如：

我想将所有列的字体颜色更改为灰色。我使用渲染器属性更改其他列的字体颜色。

这是目前的情况：

这是网格的示例代码：

<ExtGrid
    className="ppa"
    store={store}
    scrollable={true}
    plugins={{
        gridfilters: true,
        gridsummaryrow: true
    }}
    rowLines={true}
    style={{margin: 20}}
    grouped={true}
    height="755"
>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="10%" width="100%" filter='string' summaryRenderer={summarizeDate}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={summarizeLoad}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={averageSpeed}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={averageSpeed}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={averageSpeed}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeDuration}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={summarizeDistance}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={summarizeDistance}/>        
</ExtGrid>

这里是摘要渲染器 prop 的示例代码：

const summarizeDate = (grid, context) => { 
    return context.records.length + ' Trips'
}

const summarizeDuration = (grid, context) => {
    const sum = sumItemsInsideJSONArray(context.records, 'duration')
    return convertSecondToHMS(sum)
}

const summarizeTime = (grid, context) => {
    const sum = sumItemsInsideJSONArray(context.records, 'time')
    return convertSecondToHMS(sum)
}

const summarizeDistance = (grid, context) => {
    const sum = sumItemsInsideJSONArray(context.records, 'distance')
    return changeValueTo1DecimalPoint(sum) + ' km'
}

const summarizeLoad = (grid, context) => {
    const sum = sumItemsInsideJSONArray(context.records, 'load')
    return changeValueTo1DecimalPoint(sum) + ' ton'
}

const averageSpeed = (grid, context) => {
    const average = averageItemsinJSONArray(context.records, 'speed')
    return changeValueTo1DecimalPoint(average) + ' km/h'
}

现在，如果我将渲染器道具添加到其中一列：

<ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="10%" width="100%" filter='string' summaryRenderer={summarizeDate} renderer={renderGreyFontColor.bind(this, 'number')}/>

具有渲染器道具的功能：

const renderGreyFontColor = (format, value) => (
    <span style={{ color: 'slategray'}}>
        {value}
    </span>
)

应用出错

我认为这是因为上下文（table 数据）格式和值已从非空和定义的数组类型更改为未定义的对象类型。

我尝试过其他改变字体颜色的方法，例如：

使用 CSS 中的颜色规则（在 CSS 文件中添加一个 class 选择器，然后将其插入到 ExtGrid 组件中的 className 属性中）
使用JSX（在ExtGrid组件的style属性中添加颜色规则样式）
使用SASS
使用 Webpack

但上述代码中的 none 有效。

那么如果有汇总行，如何将所有列的字体颜色改为灰色呢？

Answer 1

我自己找到了解决方案。

参考这个问题和解决方法

问题很相似，但解决方法是一样的。

如何更改 Sencha Extreact Grid 产品的样式（如果有摘要行，则为字体颜色）

How to change the style (font color if there is a summary row) of Sencha Extreact Grid product

reactjs

grid

extreact