Hello,
I'm trying to follow this guide's use of cell classes in order to change a cell's default text color and selected text color: https://ko.infragistics.com/products/ignite-ui-angular/angular/components/grid/conditional-cell-styling#using-cellclasses
When I just write on the .scss file:
.nonEditable { color: black; }
I get a cell with black text. But when that cell is selected, the text stays black (description column, the cell under payee is what the default cell style is for this grid)
If I use the following scss, I can change the selected text color:
.nonEditable { --cell-selected-text-color: red; }
But if I try to use both, it overrides the selected text color:
.nonEditable { color: black; --cell-selected-text-color: red; }
Is there any way to write the scss so that the default text is black, but the highlighted text is the specified color?
Hello Nicholas,
I am glad that you find my suggestion helpful.
Thank you for choosing Infragistics Components!
Regards,Viktor KombovEntry Level Software DeveloperInfragistics, Inc.
That worked! Thank you.
Thank you for posting in our community.
This happens because the Grid Conditional Styling overrides the default styling of the cell. What I would suggest you is to style the selected cell using the .igx-grid__td--selected class:
.nonEditable { color: black; &.igx-grid__td--selected { color: red; } }
I have created a small sample illustrating my suggestion, which you can find here. Please test it on your side and let me know whether you find it helpful.