Как изменить стиль (цвет шрифта, если есть сводная строка) продукта 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, 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>
)

Ошибка приложения

Я думаю, это происходит потому, что формат и значение контекста (табличных данных) изменились с ненулевого и определенного типа массива на неопределенный тип объекта.

Я пробовал другие способы изменить цвет шрифта, например:

1. Использование правила цвета в CSS (добавьте селектор класса в файл CSS, затем вставьте его в свойство className в компоненте ExtGrid)
2. Использование JSX (добавьте стиль правила цвета в свойство стиля в компоненте ExtGrid)
3. Использование SASS
4. Использование веб-пакета

но ни один из приведенных выше кодов не работает.

Так как же изменить цвет шрифта всех столбцов на серый, если есть итоговая строка?