如何更改 Sencha Extreact Grid 产品的样式摘要行的背景颜色

如何解决如何更改 Sencha Extreact Grid 产品的样式摘要行的背景颜色

我无法更改 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>

这是摘要渲染器道具的示例代码：

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,'time')
    return convertSecondToHMS(sum)
}

const summarizedistance = (grid,'distance')
    return changeValueto1DecimalPoint(sum) + ' km'
}

const summarizeLoad = (grid,'load')
    return changeValueto1DecimalPoint(sum) + ' ton'
}

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

如果我将摘要渲染器函数更改为返回具有所需背景的视图的函数，如下所示：

const averageSpeed = (grid,'speed')
    return (
      <div style={{backgroundColor: 'slategray'}}>
        {`${changeValueto1DecimalPoint(average)} km/h`}
      </div>
    )
}

速度列的摘要行未定义，背景未更改。

我尝试了其他方法来更改字体颜色，例如：

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

但以上代码均无效。

那么如何正确更改网格中汇总行的背景？

解决方法

我自己找到了解决方案。

我使用了浏览器中的检查元素，然后编辑了 CSS 类名的属性。

我从被检查的元素中复制了选择器 #ext-gridsummaryrow-1，然后更改了元素的文本和背景属性。

#ext-gridsummaryrow-1 {
  background-color: #f6f6f6;
  color: black;
}