[ MUI ] @toolpad/core의 Account slots menuItems 적용 안되는 문제

문제

MUI의 @toolpad/core 레이아웃을 사용하다가, Account에 slots을 커스텀해야해서 하는데, 공식문서대로 적용을 해도 적용이 안되는 문제가 발생했다

공식문서 : https://mui.com/toolpad/core/react-account/#slots

Account - Toolpad Core

 

 

해결

챗GPT한테도 계속 물어보고 이상한 답변만 받고, 이와 관련된 구글링을 하는데도 하나도 안떠서 뭐지 뭐지 하다가 아래의 링크를 보고 혹시나 해서 아래처럼 적용시켰는데 적용이 되었다

https://stackoverflow.com/questions/79047504/mui-dashboardlayout-default-state

MUI DashboardLayout Default State

 

전코드

const CommonLayout = () => {
  const navigate = useNavigate();
  const [pathname, setPathname] = useState('/');
  const { user } = useUserStore();
  const { isLoggedIn, login, logout } = useAuth();
  // Remove this const when copying and pasting into your project.
  const demoWindow = typeof window !== 'undefined' ? window : undefined;

  useEffect(() => {
    user &&
      setSession({
        user: {
          name: user.name,
          email: user.email
        }
      });
  }, [user]);


  return (
    <AppProvider
      navigation={NAVIGATION}
      branding={LOGO}
      router={router}
      theme={demoTheme}
      window={demoWindow}
      // authentication={authentication}
      // session={session}
    >
      <AuthenticationContext.Provider value={authentication}>
        <SessionContext.Provider value={session}>
        	<Account
                slots={{
                  menuItems: CustomMenu
                  // 왜 적용이 안되는것인가........
                }}
        	 />

          {/* 사이드바 접히는부분 없애는 옵션 */}
          <DashboardLayout disableCollapsibleSidebar>
            <DemoPageContent pathname={pathname} />
            {/* 안에 렌더링 될 컴포넌트들 */}
            {/* 환경설정 */}
            {pathname === '/settings/system' && <SystemSettings />}
            {pathname === '/settings/item-management' && <ItemManagement />}
            {pathname === '/settings/user-management' && <UserManagement />}
            {pathname === '/settings/permission-management' && <PermissionManagement />}
          </DashboardLayout>
        </SessionContext.Provider>
      </AuthenticationContext.Provider>
    </AppProvider>
  );
};

후코드

AccountCustomMenu라고 새로 만들어서 거기에 Account태그를 넣고, 이를 DashboardLayout에 slots에 toolbarAccount옵션에다가 전달을 했더니 적용이 되었다!!

const CommonLayout = () => {
  const navigate = useNavigate();
  const [pathname, setPathname] = useState('/');
  const { user } = useUserStore();
  const { isLoggedIn, login, logout } = useAuth();
  // Remove this const when copying and pasting into your project.
  const demoWindow = typeof window !== 'undefined' ? window : undefined;

  useEffect(() => {
    user &&
      setSession({
        user: {
          name: user.name,
          email: user.email
        }
      });
  }, [user]);


  const AccountCustomMenu = () => {
    return (
      <Account
        slots={{
          menuItems: CustomMenu
        }}
      />
    );
  };

  return (
    <AppProvider
      navigation={NAVIGATION}
      branding={LOGO}
      router={router}
      theme={demoTheme}
      window={demoWindow}
      // authentication={authentication}
      // session={session}
    >
      <AuthenticationContext.Provider value={authentication}>
        <SessionContext.Provider value={session}>
          {/* 사이드바 접히는부분 없애는 옵션 */}
          <DashboardLayout
            disableCollapsibleSidebar
            slots={{
              toolbarAccount: AccountCustomMenu
              // 유저아이콘 클릭시, 나타나는 커스텀 메뉴!!!⭐️
            }}
          >
            <DemoPageContent pathname={pathname} />
            {/* 안에 렌더링 될 컴포넌트들 */}
            {/* 환경설정 */}
            {pathname === '/settings/system' && <SystemSettings />}
            {pathname === '/settings/item-management' && <ItemManagement />}
            {pathname === '/settings/user-management' && <UserManagement />}
            {pathname === '/settings/permission-management' && <PermissionManagement />}
          </DashboardLayout>
        </SessionContext.Provider>
      </AuthenticationContext.Provider>
    </AppProvider>
  );
};

 

완료 화면