LextL
Deno•3y ago
Lext

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>
  );
}

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)

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
Was this page helpful?