How to conditionally change grid row color

Flow
1

Need help understanding how to conditionally change a grid row background color. I have read many posts and followed some of the examples but still can’t seem to get it working. I am currently using flow version 14.1.17. Please see the working example below. Any help is greatly appreciated. Thank you!

Step 1 - created a custom-color.css and added to the frontend/styles/custom-color.css

.line-error {
	color: red;
	background-color: red;
}

Step 2 - import css file, @CssImport(“./styles/custom-color.css”)

Step 3 - use grid setClassNameGenerator to conditionally add the classname

grid.setClassNameGenerator(line -> {
	if (line.getValue().contains(X124030Context.CORRECTION)) {
		System.out.println("correction");
		return "line-error";
	}
	return "";
});
2

Hi! The issue is possibly with the CssImport annotation as you don’t explicitly refer to the grid component. Try to make a separate css file for the grid (ex, grid-styles.css) and use the annotation like so,

@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")