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

8 replies

apedroferreira Nov 20, 2024
Maintainer

I'm not very familiar with this type of setup but it seems that features that use React context under the hood aren't working in it...
I've tried just a simple example with MUI theming and it doesn't seem to work either.

oliviertassinari Nov 20, 2024
Maintainer

https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn

sjwen98 Nov 21, 2024
Author

@oliviertassinari Yes, I am following that example, but the issue is that Toolpad's 'branding,' 'navigation,' and other props aren't working.

apedroferreira Nov 21, 2024
Maintainer

Does changing colors in the theme work in that example?
I tried to paste it in codesandbox, changing the primary color in the theme to change a Buttons color, and it doesn't seem to work for me...

sjwen98 Nov 22, 2024
Author

That isn't working either. None of the AppProvider's attributes are working.

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 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Toolpad in HTML branding and navigation not working #4440

sjwen98 Nov 19, 2024

Replies: 1 comment · 8 replies

bharatkashyap Nov 19, 2024 Maintainer

apedroferreira Nov 20, 2024 Maintainer

oliviertassinari Nov 20, 2024 Maintainer

sjwen98 Nov 21, 2024 Author

apedroferreira Nov 21, 2024 Maintainer

sjwen98 Nov 22, 2024 Author

sjwen98
Nov 19, 2024

Replies: 1 comment 8 replies

bharatkashyap
Nov 19, 2024
Maintainer

apedroferreira Nov 20, 2024
Maintainer

oliviertassinari Nov 20, 2024
Maintainer

sjwen98 Nov 21, 2024
Author

apedroferreira Nov 21, 2024
Maintainer

sjwen98 Nov 22, 2024
Author