Java/React/Hilla – CSS选择器无法正常工作

huangapple go评论67阅读模式
英文:

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

&lt;Grid items={ingredients} selectedItems={selectedIngredients}
                  onActiveItemChanged={e =&gt;{
                setSelectedIngredients(e.detail.value? [e.detail.value] : []);
                console.log(selectedIngredients);
            }}&gt;
                &lt;GridColumn path={&quot;id&quot;}&gt;&lt;/GridColumn&gt;
                &lt;GridColumn path={&quot;name&quot;}&gt;&lt;/GridColumn&gt;
                &lt;GridColumn path={&quot;val&quot;}&gt;&lt;/GridColumn&gt;
&lt;/Grid&gt;

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;
}

huangapple
  • 本文由 发表于 2023年5月17日 20:13:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76271985.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定