Lext
Lext2y ago

How to use MUI in Fresh?

Is there a way to use Material UI components library in Fresh? Here is the code I tried:
import { Button } from "https://esm.sh/@mui/material@5.11.3";

export default function MyApp() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
import { Button } from "https://esm.sh/@mui/material@5.11.3";

export default function MyApp() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
And it gives me this error:
An error occurred during route handling or page rendering. Error: [object Object] is not a valid HTML tag name in <[object Object] variant="contained">
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2370)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2689)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at q (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:316)
at realRender (https://deno.land/x/fresh@1.1.2/src/server/render.ts:167:16)
at Object.render (https://deno.land/x/fresh@1.1.2/src/server/render.ts:185:7)
An error occurred during route handling or page rendering. Error: [object Object] is not a valid HTML tag name in <[object Object] variant="contained">
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2370)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2689)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
at q (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:316)
at realRender (https://deno.land/x/fresh@1.1.2/src/server/render.ts:167:16)
at Object.render (https://deno.land/x/fresh@1.1.2/src/server/render.ts:185:7)
You can use MUI in Preact: https://github.com/mui/material-ui/tree/master/examples/preact But I don't know how to use it in Fresh.
GitHub
material-ui/examples/preact at master · mui/material-ui
MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design. - material-ui/examples/preact at master · mui/material-ui
1 Reply
Lext
Lext2y ago
I found a Demo project that renders correctly: https://github.com/irbull/fresh-mui/blob/main/islands/Demo.tsx But it doesn't actually work as expected...
GitHub
fresh-mui/Demo.tsx at main · irbull/fresh-mui
An example that uses Fresh and MUI. Contribute to irbull/fresh-mui development by creating an account on GitHub.