Toolpad in HTML branding and navigation not working #4440

sjwen98 · 2024-11-19T09:05:21Z

sjwen98
Nov 19, 2024

Toolpad in HTML branding and navigation not working

I am trying to use toolpad without using node but in pure html and javascript.
The branding in AppProvider didn't work but npm project yes.

<head>
    <script type="importmap">
        {
            "imports": {
                "react": "//esm.sh/[email protected]",
                "react-dom": "//esm.sh/[email protected]",
                "@mui/material": "//esm.sh/@mui/[email protected]",
                "@mui/lab/Masonry": "//esm.sh/@mui/[email protected]/Masonry",
                "@mui/icons-material": "//esm.sh/@mui/[email protected]",
                "@emotion/react": "//esm.sh/@emotion/[email protected]",
                "@emotion/styled": "//esm.sh/@emotion/[email protected]",
                "@toolpad/core": "//esm.sh/@toolpad/[email protected]"
            }
        }
    </script>
</head>

<div id="root"></div>
<script src="//unpkg.com/@babel/standalone/babel.min.js" ></script>
<script type="text/babel" data-type="module">
    import * as React from "react";
    import { createRoot } from "react-dom";
    import { Box } from "@mui/material";
    import { AppProvider, DashboardLayout, PageContainer } from "@toolpad/core"

    function App() {
        return (
            <AppProvider branding={{ logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />, title: 'MUI' }}>
                <DashboardLayout>
                    <PageContainer>
                        <Box>Hello World!</Box>
                    </PageContainer>
                </DashboardLayout>
            </AppProvider>
        );
    }

    const root = createRoot(document.getElementById("root"));
    root.render(<App />);
</script>`

and here is the output

expected

here is the CodeSandbox

bharatkashyap · 2024-11-19T14:00:52Z

bharatkashyap
Nov 19, 2024
Maintainer

Debugging might be easier if you could create a codesandbox reproduction

1 reply

sjwen98 Nov 20, 2024
Author

Thanks, added.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Toolpad in HTML branding and navigation not working #4440

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Toolpad in HTML branding and navigation not working #4440

sjwen98 Nov 19, 2024

Replies: 1 comment · 1 reply

bharatkashyap Nov 19, 2024 Maintainer

sjwen98 Nov 20, 2024 Author

sjwen98
Nov 19, 2024

Replies: 1 comment 1 reply

bharatkashyap
Nov 19, 2024
Maintainer

sjwen98 Nov 20, 2024
Author