修改不了antd design mobile v5.36 Popover气泡弹出框的样式，怎么办？

Question

前端部分代码如下：

<Popover.Menu actions={isEditable ? [{ key: 'copy', text: '复制' }, { key: 'delete', text: '撤回' }] : [{ key: 'copy', text: '复制' }]}>
//...
</Popover.Menu>

目前样式如下：

希望实现如下效果：

于是打算在index.module.css里修改其样式，代码如下：

.root :global(.adm-popover-menu-list) {
  min-width: auto !important;
}

保存修改，也试过重启项目，结果是效果依然是最初的效果，没有丝毫改变，也就是说没有实现想要的效果~

接着尝试在浏览器控制台里直接修改：

这样做反而能实现想要的效果~但是，这样修改没有意义，到项目上线运行后，其样式依然是最初的样式，因此，尝试在以下路径./node_modules/antd-mobile/es/components/popover/popover-menu.css的文件里把以上代码改为以下代码：

.adm-popover-menu-list {
  overflow: hidden;
  /* min-width: 120px; */
}

保存修改后问题依旧，也试过重启项目，问题也依旧~

请问如何才能修改antd design mobile v5.36 Popover气泡弹出框的样式，实现想要的效果？请展示代码进行说明。

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

首先需要了解一下样式的覆盖优先级，当多个选择器选中同一个元素时，会根据样式的优先级来确定具体使用哪一个样式。一般来说，行内样式 > 标签内样式 > 外部样式表样式 > 浏览器默认样式，同时在同一级别的优先级中，后面的样式会覆盖前面的样式。 在上述问题中，因为修改样式的选择器比原始样式选择器的优先级低，所以无法覆盖原始样式。正确的做法是提高选择器的优先级，例如可以添加更多的父级选择器，或者使用!important来强制覆盖。 例如可以把修改的样式改为：

.root :global(.adm-popover-menu-list) {
  overflow: hidden;
  min-width: 120px !important;
}

这样就可以实现想要的效果了。 另外，需要注意的是修改了node_modules中的源代码是不可取的，因为每次更新包时都会被覆盖掉。可以通过在自己的项目中重新定义样式来覆盖默认样式，或者使用主题覆盖的方法来修改样式。