英文:
Java/React/Hilla - CSS selector for row is not working
问题
I try to style my grid in a Hilla Project, but the css selector for a row is not working.
Simple grid with 3 columns, that works
<Grid items={ingredients} selectedItems={selectedIngredients}
onActiveItemChanged={e =>{
setSelectedIngredients(e.detail.value? [e.detail.value] : []);
console.log(selectedIngredients);
}}>
<GridColumn path={"id"}></GridColumn>
<GridColumn path={"name"}></GridColumn>
<GridColumn path={"val"}></GridColumn>
</Grid>
then i added some css for styling the component. Hilla documentation referenced to vaadin styling documentation.
https://vaadin.com/docs/latest/components/grid/styling
selector like
vaadin-grid::part(row) {
background-color: green;
}
vaadin-grid::part(selected-row) {
background-color: green;
}
seems to have no effect. But its possible to change the background-color of the selected row by
vaadin-grid::part(selected-row-cell) {
background-color: yellow;
}
Also hover effects can be added on cell level, but the ::part(row) selector has no effect.
What am I doing wrong? Is there any workaround?
英文:
I try to style my grid in a Hilla Project, but the css selector for a row is not working.
Simple grid with 3 columns, that works
<Grid items={ingredients} selectedItems={selectedIngredients}
onActiveItemChanged={e =>{
setSelectedIngredients(e.detail.value? [e.detail.value] : []);
console.log(selectedIngredients);
}}>
<GridColumn path={"id"}></GridColumn>
<GridColumn path={"name"}></GridColumn>
<GridColumn path={"val"}></GridColumn>
</Grid>
then i added some css for styling the component. Hilla documentation referenced to vaadin styling documentation.
https://vaadin.com/docs/latest/components/grid/styling
selector like
vaadin-grid::part(row) {
background-color: green;
}
vaadin-grid::part(selected-row) {
background-color: green;
}
seems to have no effect. But its possible to change the background-color of the selected row by
vaadin-grid::part(selected-row-cell) {
background-color: yellow;
}
Also hover effects can be added on cell level, but the ::part(row) selector has no effect.
What am I doing wrong? Is there any workaround?
答案1
得分: 3
根据Jakub的建议,在默认主题中,背景颜色是在每个单元格上定义的:https://github.com/vaadin/web-components/blob/325917971162c7870e3ef1063a1519219aa7b71b/packages/grid/theme/lumo/vaadin-grid-styles.js#L42-L47
因此,要更改背景颜色,您需要针对单元格进行定位:
vaadin-grid::part(cell) {
background-color: green;
}
vaadin-grid::part(selected-row-cell) {
background-color: green;
}
英文:
As suggested by Jakub, in the default theme the background color is defined on individual cells: https://github.com/vaadin/web-components/blob/325917971162c7870e3ef1063a1519219aa7b71b/packages/grid/theme/lumo/vaadin-grid-styles.js#L42-L47
So to change the background color you need to target the cells instead:
vaadin-grid::part(cell) {
background-color: green;
}
vaadin-grid::part(selected-row-cell) {
background-color: green;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论