Search code examples
javascriptreactjstypescriptmantine

Width of notifications from mantine in react app

So, I have problem with notifications width, despite using lines from mantine docs, with of notifications is 100% all the time. App.tsx:

<MantineProvider defaultColorScheme="dark">
            <Notifications containerWidth="50" />
            <BrowserRouter>
                <Routing/>
            </BrowserRouter>

notifications.ts:

export const LoginFailedNotification = ()=>{
    notifications.show({
        position: 'bottom-right',
        withCloseButton: true,
        autoClose: 5000,
        title: "You've been compromised",
        message: 'Leave the building immediately',
        color: 'red',
        icon: React.createElement(IconX),
    });
}

mantine docs: https://mantine.dev/x/notifications/?t=props

I tried things described in mantine docs, i would expect that notification width would be 50px

Solution

  • solution: import '@mantine/notifications/styles.css';