How to change the style (background color of the summary row) of Sencha Extreact Grid product

Question

I have trouble changing the styles in the Sencha Extreact grid.

For example:

I want to change the background of the summary row in the grid.

This is the current condition (a summary row with white background color):

Here is the example code for the grid:

<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>

Here is the example code for the summary renderer 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'
}

If I changed the summary renderer function into a function that return a view with a desired background like this:

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

The summary row for the speed column is undefined and the background is not changed.

I have tried other ways to change the font color such as:

1. Using color rule in CSS (add a class selector in the CSS file then insert it into a className prop in the ExtGrid component)
2. Using JSX (add color rule style to the style prop in the ExtGrid component)
3. Using SASS
4. Using Webpack

but none of the above codes are working.

So how chan I change the background of the summary row in the grid properly?

Answer 1

I found the solution myself.

I used inspect element from the browser then edited the property of the CSS class name.

I copied the selector #ext-gridsummaryrow-1 from the inspected element then changed the property of text and background of the element.

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