如何更改Sencha Extreact Grid产品的样式(在单元格中可单击图标旁边的字体颜色)

Question

我很难更改Sencha Extreact网格中的样式。

例如：

我想将第一列的字体颜色更改为灰颜色，就像其他列一样。我使用渲染器支柱来更改其他列的字体颜色。

​

​

下面是极值网格的代码

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

以下是呈现器函数的代码

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

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

在第一列中，数据前面有一个可点击的图标。如果我将renderGreyFontColor函数插入到第一列的呈现器支柱中，数据将被如下所示未定义。

​

​

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

在CSS中使用颜色规则(在CSS文件中添加一个类选择器，然后将其插入到component)

• Using JSX中的className道具中(使用Webpack

向ExtGrid component)

• Using SASS

• 中的样式支柱添加颜色规则样式)。

但上述代码都不起作用。

因此，如何将第一列的字体颜色更改为灰颜色，就像其他列一样？

Answer 1

我自己找到了解决办法。。

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

​

​

我试着逐个编辑CSS类名，发现如果我更改了.x-listitem类名，就可以从网格/表中更改文本的属性。

.x-listitem{
    color: slategray;
}