reactjs - 如何更改 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 函数插入第一列的渲染器属性，数据将像这样未定义。

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

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

但上述代码都不起作用。

那么如何将第一列的字体颜色更改为与其他列一样的灰色呢？

Answer 1

我自己找到了解决方案。

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

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

.x-listitem{
    color: slategray;
}