如何为Notistack的SnackbarProvider设置全局anchorOrigin显示方向？

你将anchorOrigin直接作为SnackbarProvider的根属性传递属于配置位置错误：

• SnackbarProvider根属性下的anchorOrigin是控制provider外层包裹容器定位的参数，不会作用到每个enqueueSnackbar生成的snackbar实例上，因此配置会被忽略
• 所有snackbar实例的全局默认配置，需要统一放在defaultProps属性中传递才会生效

1. 基础全局配置 #

将anchorOrigin放入defaultProps中传递即可实现全局统一配置：

<SnackbarProvider
  maxSnack={3}
  defaultProps={{
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'right',
    },
    // 其他需要全局统一的配置也可以放在这里，比如自动关闭时长、默认变体等
    autoHideDuration: 3000
  }}
>
  {/* 你的应用根组件 */}
</SnackbarProvider>

后续调用enqueueSnackbar时如果不单独传递anchorOrigin参数，就会默认使用这里的全局配置，单独传递时会覆盖全局配置。

2. 适配RTL/LTR动态切换 #

如果需要根据站点布局方向动态调整弹出位置，可以配合状态监听动态生成配置：

// 示例：从document.dir获取当前布局方向，你也可以用自己项目的RTL状态变量
const isRTL = document.dir === 'rtl'

const snackbarDefaultProps = useMemo(() => ({
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: isRTL ? 'left' : 'right'
  }
}), [isRTL])

return (
  <SnackbarProvider
    maxSnack={3}
    defaultProps={snackbarDefaultProps}
  >
    {/* 应用根组件 */}
  </SnackbarProvider>
)

如果使用的是低于v1.0.0的旧版notistack，建议先升级到官方最新稳定版，即可适配上述配置逻辑。

内容的提问来源于stack exchange，提问作者I Stand With Israel