React项目中Mantine通知组件宽度无法按设置生效的问题

看起来你遇到了Mantine通知组件宽度不生效的问题，我来帮你分析下原因和解决办法～

你在App.tsx里给<Notifications>设置了containerWidth="50"，但通知始终是100%宽度，没法达到你期望的50px效果，核心问题出在属性取值的格式和组件默认样式上：

问题原因 #

1. containerWidth属性取值无效：Mantine的这个属性需要带单位的合法CSS值，你传的"50"没有单位，浏览器无法解析，会直接忽略这个设置，导致容器默认占满父元素宽度，通知自然继承了100%宽度。
2. 通知默认样式限制：即使容器宽度设置正确，Mantine通知组件的默认样式是width: 100%，会自动填满容器宽度。

解决办法 #

方案1：正确设置容器宽度

把containerWidth改成带单位的字符串，直接让容器宽度为50px，通知会默认填满容器：

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

方案2：单独设置单个通知的宽度

如果希望容器保持原有宽度，但单个通知的宽度更小，可以在调用notifications.show时添加width属性：

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),
        width: "50px" // 单独指定该通知的宽度
    });
}

额外排查点

如果还是不生效，可以检查是否有自定义CSS覆盖了Mantine通知的默认样式，比如全局样式里修改了.mantine-Notifications-notification类的宽度属性。

备注：内容来源于stack exchange，提问作者pawel