toasify's toast appears behind radix-themes' dialog - Stack Overflow

admin管理员组

文章数量:1394217

• version of library "@radix-ui/themes": "^3.1.6" "react-toastify": "^11.0.3"

• if radix-themes dialog is open(dialog.content), toast is appears after dialog. so toast is unclickable,,, what am i wrong for this code?

• App.tsx

function App() {
  return (
    <>
      <Theme
        accentColor="cyan"
        grayColor="slate"
        panelBackground="solid"
        scaling="100%"
        radius="small"
      >
        <QueryClientProvider client={myQueryClient}>
          <CookiesProvider>
            <Provider>
              <RouterProvider router={router} />
              <ReactQueryDevtools />
            </Provider>
          </CookiesProvider>
        </QueryClientProvider>
      </Theme>
      <ToastContainer
      position="bottom-right"
      autoClose={5000}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
      theme="colored"
      limit={3}
      toastStyle={{
        fontFamily: "Pretendard",
        fontWeight: "normal",
        fontSize: 14,
      }}
    />
    </>
  );
}

• case ( toastify's toast is unclickable )

i Tried change toast Container z-index to high number but it doesn't work. Does it have anything to do with the dialog's portal?

• version of library "@radix-ui/themes": "^3.1.6" "react-toastify": "^11.0.3"

• if radix-themes dialog is open(dialog.content), toast is appears after dialog. so toast is unclickable,,, what am i wrong for this code?

• App.tsx

function App() {
  return (
    <>
      <Theme
        accentColor="cyan"
        grayColor="slate"
        panelBackground="solid"
        scaling="100%"
        radius="small"
      >
        <QueryClientProvider client={myQueryClient}>
          <CookiesProvider>
            <Provider>
              <RouterProvider router={router} />
              <ReactQueryDevtools />
            </Provider>
          </CookiesProvider>
        </QueryClientProvider>
      </Theme>
      <ToastContainer
      position="bottom-right"
      autoClose={5000}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
      theme="colored"
      limit={3}
      toastStyle={{
        fontFamily: "Pretendard",
        fontWeight: "normal",
        fontSize: 14,
      }}
    />
    </>
  );
}

• case ( toastify's toast is unclickable )

i Tried change toast Container z-index to high number but it doesn't work. Does it have anything to do with the dialog's portal?

• radix-ui

Share Improve this question Follow asked Mar 13 at 4:49 Jay BeemoJay Beemo 11

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

z-index only works within the same stacking context. Your ToastContainer is outside the dialog's stacking context, its z-index won't have any effect on the dialog's content.
The simplest solution is to move the <ToastContainer> component inside the <Theme> component.

function App() {
  return (
    <Theme
      accentColor="cyan"
      grayColor="slate"
      panelBackground="solid"
      scaling="100%"
      radius="small"
    >
      <QueryClientProvider client={myQueryClient}>
        <CookiesProvider>
          <Provider>
            <RouterProvider router={router} />
            <ReactQueryDevtools />
            <ToastContainer
              position="bottom-right"
              autoClose={5000}
              newestOnTop={false}
              closeOnClick
              rtl={false}
              pauseOnFocusLoss
              draggable
              pauseOnHover
              theme="colored"
              limit={3}
              toastStyle={{
                fontFamily: "Pretendard",
                fontWeight: "normal",
                fontSize: 14,
              }}
            />
          </Provider>
        </CookiesProvider>
      </QueryClientProvider>
    </Theme>
  );
}

本文标签： toasify39s toast appears behind radixthemes39 dialogStack Overflow