compatible-crimson•2y ago

can't modify the title in sidebar mui

in version 4 i can't change the title i already did the customization in title component it generated by swizzle still it does not works..

15 Replies

kapa.ai•2y ago

Hi @x_lucifer. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not mention version 4 or the swizzle feature. However, you can refer to the refine documentation (https://refine.dev/docs) for more information on customizing the title and other components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

kapa.ai•2y ago

<@568420485356978176> kapa.ai is still learning and improving, please let us how it did by reacting below

compatible-crimsonOP•2y ago

it doesn't work

optimistic-gold•2y ago

Hey @x_lucifer Which UI Library are you using?

compatible-crimsonOP•2y ago

material ui

optimistic-gold•2y ago

I suggest you review this doc. If the problem still persists you should give us a codesandbox that we can reproduce. https://refine.dev/docs/api-reference/mui/components/mui-themed-layout/#customizing-with-swizzle

compatible-crimsonOP•2y ago

 <ThemedLayoutV2
        Header={() => <Header isSticky={true} />}
        Sider={() => <ThemedSiderV2 />}
        Title={({ collapsed }) => (
          <ThemedTitleV2
            collapsed={true}
            text="My Project"
          />
        )}
      >
        <Component {...pageProps} />
      </ThemedLayoutV2>

this is the format i give it through but that text not affect in the mui sider

optimistic-gold•2y ago

The text is hidden because it is collapsed. You should update like this.

<ThemedLayoutV2
  Title={({ collapsed }) => (
    <ThemedTitleV2 collapsed={collapsed} text="Foo" />
  )}
>

<ThemedLayoutV2
  Title={({ collapsed }) => (
    <ThemedTitleV2 collapsed={collapsed} text="Foo" />
  )}
>

compatible-crimsonOP•2y ago

still it won't work

optimistic-gold•2y ago

https://codesandbox.io/s/compassionate-aj-h14s1l?file=/src/App.tsx:5028-5076

compatible-crimsonOP•2y ago

i updated the code you given still im facing the same issue

compatible-crimsonOP•2y ago

https://codesandbox.io/p/github/X1ucifer/ZERO_CRUD/main?layout=%257B%2522activeFilepath%2522%253A%2522%252Fpages%252F_app.tsx%2522%252C%2522openFiles%2522%253A%255B%2522%252Fpages%252F_app.tsx%2522%252C%2522%252Fsrc%252Fcomponents%252FthemedLayout%252Findex.tsx%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522fullScreenDevtools%2522%253Afalse%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522vertical%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522DEVTOOLS_PANELS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clhbvtbrd039n356msyj2p5ha%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clhbvtbrd039n356msyj2p5ha%2522%253A%257B%2522id%2522%253A%2522clhbvtbrd039n356msyj2p5ha%2522%252C%2522activeTabId%2522%253A%2522clhbvtgke03fu356mf13s1otx%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clhbvtbrd039m356m0b48h3p9%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clhbvtgke03fu356mf13s1otx%2522%252C%2522path%2522%253A%2522%252Flogin%253Fto%253D%25252Fblog-posts%2522%257D%255D%257D%257D%252C%2522showSidebar%2522%253Atrue%252C%2522showDevtools%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%252C%2522editorPanelSize%2522%253A50.390625%252C%2522devtoolsPanelSize%2522%253A32.526041666666664%257D check this code

CodeSandbox

CodeSandbox is an online editor tailored for web applications.

optimistic-gold•2y ago

@x_lucifer I'm getting Project Not Found error 😦 Please check codesandbox project

fair-rose•2y ago

Hi ! i cant get the title in Antd

       <Authenticated fallback={<CatchAllNavigate to="/auth/login" />}>
            <ThemedLayoutV2
                Header={() => <Header />}
                Sider={() => <ThemedSiderV2 fixed />}
                Title={({ collapsed }) => (
                    <ThemedTitleV2
                        collapsed={collapsed}
                        text="Renta Car"
                        icon={<TeamOutlined />}
                    />
                )}
            >
                <Suspense fallback={<Skeleton active paragraph={{ rows: 14, width: "85%" }} />}>
                    <Outlet />
                </Suspense>
            </ThemedLayoutV2>
        </Authenticated>

       <Authenticated fallback={<CatchAllNavigate to="/auth/login" />}>
            <ThemedLayoutV2
                Header={() => <Header />}
                Sider={() => <ThemedSiderV2 fixed />}
                Title={({ collapsed }) => (
                    <ThemedTitleV2
                        collapsed={collapsed}
                        text="Renta Car"
                        icon={<TeamOutlined />}
                    />
                )}
            >
                <Suspense fallback={<Skeleton active paragraph={{ rows: 14, width: "85%" }} />}>
                    <Outlet />
                </Suspense>
            </ThemedLayoutV2>
        </Authenticated>

however, when I go set the title property it works for some reason although it has been deperacted

can't modify the title in sidebar mui

Did you find this page helpful?