rising-crimson•4h ago

Snackbar's customization

Hello! I would like to completely change the UI for snackbars, but keep all their current logic. Do you have any example of how to do this? I use Refine + MUI

2 Replies

kapa.ai•4h ago

Hi @Kubik. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To completely change the UI for snackbars in a Refine + MUI project, while keeping all the current notification logic, you should customize the underlying Notistack snackbars. Refine uses Notistack for notifications in its Material UI integration, and you can provide your own custom Snackbar component to Notistack via the content prop of the <SnackbarProvider> (which is extended by <RefineSnackbarProvider>). How to approach this: 1. Wrap your app with <RefineSnackbarProvider> as usual, since this is required for Refine's notification logic to work with Notistack. 2. Customize the snackbar UI by passing a custom content prop to <RefineSnackbarProvider>. This prop allows you to render your own component for each snackbar, giving you full control over its appearance. Here’s a conceptual example based on the official Notistack and Refine documentation:

import { Refine } from "@refinedev/core";
import { RefineSnackbarProvider, useNotificationProvider } from "@refinedev/mui";
import { ThemeProvider } from "@mui/material/styles";
import { RefineThemes } from "@refinedev/mui";
import CssBaseline from "@mui/material/CssBaseline";
import GlobalStyles from "@mui/material/GlobalStyles";

// Your custom snackbar component
const CustomSnackbar = (key, message) => (
    <div style={{ background: "#222", color: "#fff", padding: 16, borderRadius: 8 }}>
        {/* Customize as you wish */}
        {message}
    </div>
);
const App = () => (
    <ThemeProvider theme={RefineThemes.Blue}>
        <CssBaseline />
        <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
        <RefineSnackbarProvider
            // Pass custom content renderer
            content={(key, message) => <CustomSnackbar key={key} message={message} />}
        >
            <Refine notificationProvider={useNotificationProvider}>
                {/* ...your app */}
            </Refine>
        </RefineSnackbarProvider>
    </ThemeProvider>
);

import { Refine } from "@refinedev/core";
import { RefineSnackbarProvider, useNotificationProvider } from "@refinedev/mui";
import { ThemeProvider } from "@mui/material/styles";
import { RefineThemes } from "@refinedev/mui";
import CssBaseline from "@mui/material/CssBaseline";
import GlobalStyles from "@mui/material/GlobalStyles";

// Your custom snackbar component
const CustomSnackbar = (key, message) => (
    <div style={{ background: "#222", color: "#fff", padding: 16, borderRadius: 8 }}>
        {/* Customize as you wish */}
        {message}
    </div>
);
const App = () => (
    <ThemeProvider theme={RefineThemes.Blue}>
        <CssBaseline />
        <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
        <RefineSnackbarProvider
            // Pass custom content renderer
            content={(key, message) => <CustomSnackbar key={key} message={message} />}
        >
            <Refine notificationProvider={useNotificationProvider}>
                {/* ...your app */}
            </Refine>
        </RefineSnackbarProvider>
    </ThemeProvider>
);

Key points: - The notification logic remains unchanged, as you’re only customizing the UI layer. - You can use all Notistack features (actions, variants, etc.) in your custom component. - For more advanced customization, refer to the Notistack documentation on custom snackbars. References:
- Refine Material UI Theming & SnackbarProvider - Refine Material UI Notifications If you need a more detailed example or run into issues with the integration, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4h ago

<@449225301000716310> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Snackbar's customization

Did you find this page helpful?