我搜索了很多，但每个解决方案都是在页面中包含一些常量 CSS 类名，并使用 Column 的 ClassNameGenerator 在单元格/行上设置正确的类名。
现在，当开发人员可以决定格式化单元格时，这可能是一个很好的解决方案，但是当用户可以决定（尤其是使用编写为单元格渲染器的脚本）单元格的外观时，就不可能使用类名生成器。
所以问题是，如何不使用任何 CSS 以编程方式格式化单元格/行背景？我可以提供自定义组件作为单元格值。所以渲染一个带有图标的标签，或者只是图标，或者一个复选框是很好的，但是为这个渲染的组件着色是不够的，因为它比单元格本身小，使它看起来非常难看。我需要访问单元格的根元素，并使用 getStyle().set("background", "xxxx") 对其进行着色。如何做到这一点？
谢谢！
【问题讨论】：
标签： formatting vaadin cell vaadin-grid
好的，我终于解决了。我使用具有适当模板结构的模板渲染器。我以某种方式修改了单元格样式，我的渲染器 DIV 填充了整个单元格（从原始单元格中删除了任何填充/边距）
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
我还在其中一个主要 CSS 中添加了一些简单的 CSS 声明：
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
这样渲染的 DIV 会填充整个单元格，我可以为它的背景着色。
现在问题出现在选择上，因为选择不再可见。为此，您会发现 --cellopa 变量通常设置为 255，而选定单元格设置为 0。
现在，当我在 div 上定义背景颜色时，我使用 rgba 并将 alpha 设置为 var(--cellopa) 变量，例如 rgba(255, 0, 0, var(--cellopa) ))
现在当没有选择行时，cellopa 是 255，所以背景是可见的，当我选择行时，cellopa 设置为 0，所以 DIV 的背景变得透明，并且行选择颜色在行可见。这速度超级快，而且更改选择不会导致任何故障，并且之前的着色状态也可以正常恢复。
我还设法解决了 treegrid 问题，并设法完全使用层次结构列的特殊模板为层次结构列着色，并在考虑到级别的情况下进行一些填充。
【讨论】：
您可以使用 TemplateRenderer。
例如：
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
查看本教程了解更多信息：https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
【讨论】：