identifying child nodes /elements for css

[nukkamoto]

Describe the bug

It is very difficult to target some css as we can't identify individual controls.

could we therefore by default change the line here

jsonforms/packages/vanilla/src/layouts/util.tsx

Line 51 in 988f282

<div className={className} key={`${path}-${index}`}>

where the path or combination of path and index can be used to concat a class name for className="vertical-layout-item" then becomes something like className="vertical-layout-item {{path}}" where path could be username for instance.

Expected behavior

see above step.

then change

<div className={className} key={${path}-${index}}>
to
<div className={${className} ${path}} key={${path}-${index}}>

Steps to reproduce the issue

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

In which browser are you experiencing the issue?

n/a

Framework

React

RendererSet

Vanilla

Additional context

No response

[sdirix]

Hi @valtido! Thanks for the suggestion. Adding parts of the path to the classes of the respective rendered element could definitely make sense. We should probably strip all array indices from the path when doing this.