Uploaded image for project: 'Red Hat Internal Developer Platform'
  1. Red Hat Internal Developer Platform
  2. RHIDP-3838

Material UI v5 theme classes are not being created and applied to components

Prepare for Y ReleasePrepare for Z ReleaseRemove QuarterXMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Duplicate
    • Icon: Undefined Undefined
    • None
    • None
    • Dynamic plugins
    • None
    • False
    • Hide

      None

      Show
      None
    • False

      Description of problem:

      Loading a theme from a dynamic plugin appears to apply the colors properly for the most part, however it appears that the v5 classes that are created by the v5 version of the theme do not appear to be added to the app or applied to components. With some investigation it appears the emotion styles in the head element of the document where these classes should be getting filled in are completely empty, this is unexpected as the UnifiedThemeProvider initializes both v4 and v5, where material v4 classes are handed by jss-react and appear to be added to the document properly, and v5 which uses emotion, these classes which are derived from the theme do not appear to be getting added to the document head.

      This actually seems to be the case even with the out of box themes, but definitely happens with a theme loaded from a dynamic plugin.

      One interesting point to consider -> https://docs.tss-react.dev/troubleshoot-migration-to-muiv5-with-tss

      But the other observation is that front-end bundles each appear to have their own copy of the various style related packages at runtime, where perhaps the emotion package that contains the cache and cache provider needs to be a shared module in the webpack federated module config.

            stlewis_2 Stan Lewis
            stlewis_2 Stan Lewis
            RHIDP - Dynamic Plugins
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: