Width of notifications from mantine in react app

Question

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

pawel · Accepted Answer · 2025-01-16 00:07:10Z

2

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

answered Jan 16 at 0:07

pawel

531 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Jan 16 at 13:17

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Width of notifications from mantine in react app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related