Chakra UI：响应式 Toast 通知

Question

我正在为我的应用程序使用脉轮 UI，这是我调用以显示通知的代码块。

const successToast = useToast({
    title: 'Logged In',
    description: "Waiting for developers to build redirect pages",
    status: 'success',
    duration: 5000,
    isClosable: true,
    position: "bottom-right",
  })

Chakra 提供了一种处理响应式设计的方法：https://chakra-ui.com/docs/features/responsive-styles。所以我希望在使用移动设备时通知显示在顶部。为此，我尝试这样做：

position: {base: 'top-right', lg:'bottom-right'}

但我收到错误提示：

(property) UseToastOptions.position?: ToastPositionWithLogical | undefined
The placement of the toast

@default

"bottom"
Type '{ base: string; lg: string; }' is not assignable to type 'ToastPositionWithLogical | undefined'.
  Type '{ base: string; lg: string; }' is not assignable to type '"bottom-right"'.

以前，当我使用此方法制作其他设计元素时，它起作用了。我该如何修复它或让它对此做出响应。

Toast 通知文档：https://chakra-ui.com/docs/feedback/toast

Answer 1

您可以使用 useBreakpointValue 挂钩。

const position = useBreakpointValue({ base: 'top-right', mlg: 'bottom-right' }) as any;

function displayToast(){
    const successToast = useToast({
    // [...]
    position: position,
  })
}

编辑：添加 as any 因为位置只接受 ToastPositionWithLogical

Chakra UI：响应式 Toast 通知

Chakra UI: Responsive Toast Notifications

reactjs

typescript

chakra-ui