如何调整Notistack Snackbar特定实例的底部位置？

核心问题分析 #

你当前的写法存在两个关键问题：

• classes.root 传入的是样式对象，但Notistack要求此处传入CSS类名，而非直接的样式对象
• style 属性的样式优先级低于Notistack/MUI内置的定位样式，无法直接覆盖生效

正确实现方案 #

方法1：使用MUI的sx属性（推荐，适用于MUI v5+） #

Notistack的enqueueSnackbar支持传入MUI的sx属性，它能生成更高优先级的样式，精准覆盖内置定位规则：

import { enqueueSnackbar } from 'notistack';

enqueueSnackbar('Test message', {
  variant: 'success',
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'right',
  },
  sx: {
    '&.MuiSnackbar-root': {
      bottom: '50px',
    },
  },
});

方法2：自定义CSS类（兼容所有Notistack版本） #

1. 先在CSS文件中定义自定义样式类：

.custom-bottom-snackbar-container {
  bottom: 50px !important;
}

2. 在enqueueSnackbar中传入类名：

import { enqueueSnackbar } from 'notistack';

enqueueSnackbar('Test message', {
  variant: 'success',
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'right',
  },
  classes: {
    root: 'custom-bottom-snackbar-container',
  },
});

关键注意事项 #

• 必须保留anchorOrigin配置，它是Notistack布局的基础，自定义样式仅在此基础上调整偏移量
• 使用!important是为了确保自定义样式优先级高于Notistack内置样式，避免被覆盖
• 两种方案都仅作用于当前调用生成的特定Snackbar，不会影响全局其他Snackbar的布局

内容的提问来源于stack exchange，提问作者jhpark