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

Question

我无法更改 Sencha Extreact 网格中的样式。

例如：

我想像其他列一样将第一列的字体颜色更改为灰色。我使用 renderer 属性更改其他列的字体颜色。

这是提取网格的代码

<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 函数插入第一列的 renderer 属性，数据将像这样未定义。

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

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

但上述代码中的 none 有效。

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

Answer 1

我自己找到了解决方案。

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

我试着一个一个地编辑 CSS class 名字，发现如果我改变 .x-listitem class 名字，我可以改变属性来自 grid/table.

的文本

.x-listitem{
    color: slategray;
}

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

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

reactjs

grid

extreact