Theme gets inverted on component re-render

[stephenrichardson]

When the page loads the theme saved in local storage is loaded and everything looks correct. When we select an asset in the tree on the left we load the latest details for that asset and update all our components. The component at the bottom dynamically generates the FluentCards based on the returned data for the selected asset. If we switch the theme to dark or light and then select another asset the style gets inverted as seen in the screenshot. A page refresh will fix this problem.

[dvoituron]

Can you try, adding the attribute MinimalStyle="true" to you FluentCard?

[stephenrichardson]

I can't believe it was that simple. Thanks. Is this best practice or is this just a short term fix?

[dvoituron]

That is a side effect of the web component used by our lib.

By default the FluentCard component is a visual container and design system provider. Cards are snapshots of content that are typically used in a group to present collections of related information. Thus, by design, the FluentCard component includes all the styles required for a good representation of the other components included in it. This adds a large number of styles such as justify-content; align-items; gap; width; and over 80 CSS variables.

To avoid this, you can use the MinimalStyle property. This will remove all the default styles from the FluentCard component. This will allow you to use the FluentCard component as a simple container without any style, except the styles to draw the box-shadow (and some minimal styles).