How to change the style (font color beside a clickable icon in cell) of Sencha Extreact Grid product

Question

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

For example:

I want to change the font color of the first column to gray color like other columns. I use renderer prop to change the font color for other columns.

Here is the code for the extreact grid

<ExtGrid
    store={store}
    scrollable={true}
    plugins={{
        gridfilters: true,
    }}
    rowLines={true}
    grouped={true}
    height="100%"
    maxWidth= "100vw"
    width="100%"
    style={{borderTop: "1px solid gainsboro"}}
>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="9%" width="100%" filter='string'
        cell={{
            tools:{
                right: {
                    handler: onDeviceNameClicked
                }
            }
        }}
    />
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' renderer={renderTripsCount.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='string' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='string' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='string' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='string' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='string' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='string' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' renderer={renderGreyFontColor.bind(this, 'number')}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' renderer={renderGreyFontColor.bind(this, 'number')}/>
</ExtGrid>

Here is the code for the renderer function

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

const renderTripsCount = (format, value) => (
    <span style={{ color: 'slategray'}}>
        {`${value} Trips`}
    </span>
)

In the first column, there is a clickable icon before the data. If I insert the renderGreyFontColor function to the renderer prop for the first column, the data will be undefined like this.

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 could I change the font color of the first column to gray color like other columns?

Answer 1

I found the solution myself.

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

I tried editing one by one the CSS class name and found that if I changed the .x-listitem class name, I could change the property of text from the grid/table.

.x-listitem{
    color: slategray;
}