making @mui/material work ?

[inverted-capital]

Hey there, we are trying to bring a set of components over that were built using @mui/material components, but we cannot seem to get them to work in fresh.

It seems as tho the context providers do not hydrate correctly.

Has anyone else managed to make this library work in Fresh ?

[inverted-capital]

If someone can give us commercial support for this issue, we are happy to pay for it to be resolved

[deer]

Can you please provide more details? Error messages, reproduction steps, a repo, etc

[inverted-capital]

Yes of course - please find repro here: https://github.com/inverted-capital/fresh-mui

The file of interest is https://github.com/inverted-capital/fresh-mui/blob/main/islands/Counter.tsx

This is a fresh "fresh" project, and then I added an import for @mui/material along with react compatibility entries.

It would appear that something to do with context isn't being passed down to the component properly, however using these components in a standalone web page, exactly as here, without any providers for Theme or Cache or anything like that, works as expected since they have some defaults built in.

[kerimhudson]

I did have a quick play around with this but I think the issue might be with using emotion under the hood. It seems the Emotion team aren't too concerned with keeping their API in line with preact.

I did try using goober in an island and that seemed to work. There is an open PR at looking to use goober as a style engine for Material UI, which might be a solution. But I also didn't really try reconfiguring MUI to use styled-components.

[kerimhudson]

@inverted-capital in the Discord, the author of FreshNPM said he has building compatibility for @mui/materialon his to-do list.

Discord Message