Set overall grid text color but allow custom colors in rowRender

[Jonathan]

Something seems to have changed between Grid v5 and v7.  Previously, I could set the overall grid text color with a simple style prop on the Grid itself.

<Grid style={{ color: "#000" }} ... />

That no longer works, so now I need to use a custom CSS class like this:

.k-grid-black .k-table-td {
    color: #000;
}

<Grid className="k-grid-black" ... />

Seems I have to use the selector .k-table-td for that class.

This works, however, now any rowRender function can't set a custom color - it gets ignored.

Any suggestions on how to make this work better?  Thanks!

[Konstantin Dikov]

Hi Jonathan,

Thank you for contacting us.

The colors of the different elements within the Grid are styles with explicit selectors within the theme. If you want to change the color of most of the elements within the Grid using the className that you have you can add the following CSS selectors to override the colors:

            <style>
            body .k-grid-black .k-table, body .k-grid-black .k-data-table,
            body .k-grid-black .k-table-thead,
            body .k-grid-black .k-table-header,
            body .k-grid-black .k-table-group-sticky-header{
                color: green;
            }

The above will allow you to set color for the rows as well.

Here is an example with the above styles:

• https://stackblitz.com/edit/react-hpu91n?file=app%2Fmain.jsx,index.html

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Jonathan]

Hi, thank you for the reply.  That helped!