Question about styling using FormEngine class names

[davidbrinton]

We're doing some custom styling on the designer following the guide found here https://formengine.io/documentation/designer-customization but we've found that we often need to style things that look like they have custom-generated class names and no user-designated ID or class name we could use in our CSS selector. Is it safe to use these class names or do we need to rely on the hierarchy of the HTML instead to style things? An example of some of our styling is shown below here.

LeftPanel_Content: {
  style: `   

    .ltr-1mhvhf3 {
      flex-direction: column;
    }

    .ltr-555w1v svg {
      display: none;
    }
  `
},

MainContainer: {
  style: `
    .ltr-zz23do {
      position: fixed !important;
      left: 300px;
    }
  `
}

[sergeythrees]

Hi, @davidbrinton

Is it safe to use these class names

No, these classNames are generated differently each time.

do we need to rely on the hierarchy of the HTML instead to style things?

Yes, if you want to style the elements lying deep inside the components, then so far it is only possible in this way.

[davidbrinton]

@sergeythrees Thank you for your answer. The reason we chose to use these class names is because the hierarchy can also change every time. Can we request that meaningful IDs or class names or any other attribute (because you can really select based on any attribute and value with CSS) be added throughout the structure so that we can reliably change the styling of the tool without having to revisit the code whenever we update to the latest version?

[sergeythrees]

@sergeythrees Can we request that meaningful IDs or class names or any other attribute (because you can really select based on any attribute and value with CSS) be added throughout the structure so that we can reliably change the styling of the tool without having to revisit the code whenever we update to the latest version?

We will consider how best to implement this solution and let you know.