esm.sh Typography component is not picking up the theme from the ThemeProvider

[Kulodo]

Steps to reproduce

Steps:

1. Open this link to live example: (required) https://codesandbox.io/p/sandbox/l9tkcj

Current behavior

The Typography component with text Heading 1 is displayed using the default theme eg fontSize is 6rem.

Expected behavior

The Typography component should pick up the theme provided by the ThemeProvider. i.e The font size of the h1 should therefore be 1rem as defined in the theme. The color should also be green.

Context

I am trying to apply a theme using ThemeProvider to the Typography component.
Note I am importing mui and react from esm.sh.
Interestingly if I append the import urls with '?dev' then the Typography component does pick up the theme from the ThemeProvider correctly.

Your environment

The live example is at https://codesandbox.io/p/sandbox/l9tkcj
I am using esm.sh to import.

Search keywords: Typography ThemeProvider

[siriwatknp]

Probably due to difference instance for the React Theme context. I'm not sure if we want to spend time to fix this.

[Kulodo]

Probably due to difference instance for the React Theme context. I'm not sure if we want to spend time to fix this.

Can you explain why you wouldn't want to fix this? Is it a bug in material-ui or not? Is there a work around?

[siriwatknp]

Can you explain why you wouldn't want to fix this? Is it a bug in material-ui or not? Is there a work around?

The workaround is to import from @mui/material to ensure that all the components are using the same Theme instance:

https://codesandbox.io/p/sandbox/mui-esm-sh-themeprovider-forked-2swlp9

[Kulodo]

Your fork is still not picking up myTheme through the theme provider.

[Kulodo]

@siriwatknp thanks for your help so far.

Here is an example that shows that your workaround isn't working.

I added the following to your workaround attempt. See https://codesandbox.io/p/sandbox/icy-voice-fzf82f

        palette: {
            primary: {
              main: '#ff0000',
            },
        },

This is not getting picked up in your modification to the line

<Typography variant="h1" sx={{ color: 'primary.main' }}>heading 1</Typography>

However, as I mentioned in my error report, if I append the import urls with '?dev' then the ThemeProvider does provide myTheme correctly and the Typography h1 does get the correct fontSize and color. See https://codesandbox.io/p/sandbox/awesome-mendeleev-mddzqh

So the production import urls are not working and the development import urls are.

Also I tried older version of material. I found that version 15.6.7 from 4 months ago was the newest version that works. See https://codesandbox.io/p/sandbox/nameless-moon-8xwxq4

I hope that is useful information for you.

Do you really think this is low priority error? It seems serious to me.

[marklundin]

Is esm.sh resolving a single instance of React