如何使用CSS Module移除PrimeReact MenuBar的响应式汉堡按钮

解决方案 #

CSS Module 默认会对所有未使用 :global() 标记的类名做局部哈希编译，而 .p-menubar-button 是 PrimeReact 组件自带的全局类名，需要用全局选择器标识才能正确匹配。
直接修改 NavBar.module.css 代码即可：

.menubar :global(.p-menubar-button) {
  display: none !important;
}

如果仅需要在响应式特定断点下隐藏按钮，可以套入对应媒体查询规则，示例如下（仅在屏幕宽度小于960px的场景隐藏）：

@media (max-width: 960px) {
  .menubar :global(.p-menubar-button) {
    display: none !important;
  }
}

注：添加 !important 是为了覆盖 PrimeReact 组件自带的内置样式优先级，若实测不加也能生效可自行移除。

内容的提问来源于stack exchange，提问作者Htet Oo Wai Yan