[AnalyticalTable] Tree table with hierachical data does not retain style on expand due to app level box-sizing: border-box

[kmanisha29]

I am using analytical table with tree view having hirarchiacal data.
On version 1.26, I see that 1st column with anchor tag for expand / collapse with custom cell or even normal cell is not maintaining style for hierarchical; view. No left space being added.

Not sure if exact cause but on investigating i found host application has used *{box-sizing: border-box} at root level and when toggling from devtools for this style, nested space shows up ..
Could you please suggest how to handle this we can't remove box-sizing : border-box style from host app.
We are devloping micro frontend and only have control over that unit.

Another issue: since v1.26, an extra space is getting added to all columns in tree table and it is an element due to which text is not getting aligned from beigining ( TextAlign.Begin). It looks like centrally aligned even horizontally.

Attached stackbliz link with both issue shown: https://stackblitz.com/edit/github-3wiuce-kjl4sq?file=src%2FApp.tsx,src%2FTreeCell.tsx,src%2FuseData.ts

[Lukas742]

Hi @kmanisha29

supporting overriding the default box-sizing for all elements is unfortunately not supported by our library, so I can't really offer a solution here.

For the indentation issue, I've added an answer here: #6368

[kmanisha29]

The style in host app is actually :
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}

So any other element that needs content-box can add it and inherit for its child element.
Could you please suggest if it should be handled from the component side or a workaround can be provided in library.
We are using MFE to show this component in host app whose style we cannot change from root level.

[Lukas742]

We're using a CSS layer for all our styles, so if you're wrapping your global styles in another layer, the specificity is lower and therefore the styles of @ui5/webcomponents-react have precedence.

Example: https://stackblitz.com/edit/ui5wcr-at-7strnz?file=src%2Findex.css,src%2FApp.tsx

Also, it's possible to explicitly import the CSS bundles by setting the staticCSSInjected prop of the ThemeProvider to true. (docs). This way, you're in control when and how the CSS bundle/s are imported.

---

Currently, there's no way to configure whether a CSS layer is applied or not. We'll look into this, but it might take some time before we can address this topic.

[Lukas742]

Hi @kmanisha29
we've discussed this topic internally and came to the conclusion that using a layer for our internal CSS should be the default.
This does not apply for the static bundles. In v2.2.0 we removed the layer from the generated classes again, so apps have now more control over the bundles. You can find out more about this here.