在使用message组件时失效

[ShuangxiHan]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.6

Environment

vue3.3.4 vite4.4.11

Reproduction link

https://next.antdv.com/components/message-cn

Steps to reproduce

1.先创建一个vue3项目；
2.按照官网指示全局引入ant-design-vue；
3.在页面中引入message后不生效（其他组件皆有效，我把版本降到3.2.20就生效了）

What is expected?

正常生效

What is actually happening?

message无效，没有全局提示

[cc-hearts]

能提供复现的代码吗？

[383366204]

我也有同样的问题，在360浏览器下message.success无法弹出

[qingtongq]

App.vue下添加

<style lang="less"> // 不能有scoped
.ant-message {
  left: 0;
}
</style>

[AshKilla]

我也遇到同意问题 ，更新到V4.0.06之后message与nofication全部失效

[AshKilla]

App.vue下添加

<style lang="less"> // 不能有scoped
.ant-message {
  left: 0;
}
</style>

我试了没用

[383366204]

我也有同样的问题，在360浏览器下message.success无法弹出

我发现了是style-provider在360浏览器下，虽然设置了priority=high，但是样式里的:where并没有去除，导致了样式没了

[sssx-li]

可以使用官方推荐的hooks写法；
import { message } from 'ant-design-vue';
const [messageApi, contextHolder] = message.useMessage();
const info = () => {
messageApi.info('Hello, Ant Design Vue!');
};
不过原来的写法更方便些，还是得等修复╮(╯▽╰)╭

[cc-hearts]

如果需要解决问题 可以给一个最小的复现代码。

[ShuangxiHan]

ant-bug-demo.zip
抱歉，最近太忙了，这是我写的问题代码

[ShuangxiHan]

另外，刚刚测试了一下，楼上所有的解决方案都是无效的，但是nofication这个组件我这里是生效的

[AshKilla]

ShuangxiHan ***@***.***>于2023年11月8日 周三13:28写道：

另外，刚刚测试了一下，楼上所有的解决方案都是无效的，但是nofication这个组件我这里是生效的 — Reply to this email directly, view it on GitHub <#7065 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG7TFXJHX5QWIRGMRQFS6FTYDMKAZAVCNFSM6AAAAAA6VNH4HOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBRGEYTONRSGM> . You are receiving this because you commented.Message ID: ***@***.***>

我试了楼上的方法 已经可以了

[cc-hearts]

ant-bug-demo.zip 抱歉，最近太忙了，这是我写的问题代码

感谢 我定位到问题了

[ShuangxiHan]

哪种方法，我加了个<style>,启动直接报错

[cc-hearts]

<template>
  <div>
    <a-space wrap>
      <a-button type="primary" @click="fun1">message基础写法</a-button>
      <a-button @click="fun2">message基础写法</a-button>
      <a-button @click="() => openNotificationWithIcon('success')">notification</a-button>
    </a-space>
  </div>
</template>

<script setup>
import { message, notification } from 'ant-design-vue';
// eslint-disable-next-line no-unused-vars
const [messageApi, contextHolder] = message.useMessage();
const fun1 = () => {
  message.info('我出现了');
};
const fun2 = () => {
  messageApi.info('我出现了');
};
const openNotificationWithIcon = type => {
  notification[type]({
    message: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  });
};
</script>

<style>
.ant-message {
  left: 50%;
  transform: translateX(-50%);
}
</style>