如何删除 PrimeReact 的菜单栏中的菜单栏按钮？答案

【问题标题】：How to remove menubar-button in PrimeReact's MenuBar?如何删除 PrimeReact 的菜单栏中的菜单栏按钮？
【发布时间】：2021-11-18 12:21:00
【问题描述】：

我想要一个MenuBar，在响应模式下不显示hamburger button。我正在使用 CSS 模块来设置我的组件的样式。如何使用 CSS 模块完全删除汉堡菜单按钮？我找不到访问其特定 HTML 标记 <a class="p-menubar-button" ...> 并执行 Display: None 的方法。

NavBar.js中的MenuBar声明-

import { Menubar } from 'primereact/menubar'
import styles from './NavBar.module.css'

const NavBar = () => {
  return (
    <Menubar start={start} end={end} className={styles.menubar} />
  )
}

NavBar.module.css 中的 CSS -

.menubar {
  // I don't know how to access .p-menubar-button here
}

纯 HTML 中的菜单栏组件 -

<div class="p-menubar p-component NavBar_menubar__ZntdZ">
  <div class="p-menubar-start">...</div>
  <a class="p-menubar-button" ...>...</a>
  <div class="p-menubar-end">...</div>
</div>

【问题讨论】：

请分享您的代码。
@Shahriar 我已经添加了代码。

标签： reactjs css-modules primereact

【解决方案1】：

事实证明，使用 CSS 的 child selector 和 attribute selector 很容易解决。我不知道这些选择器可以与 CSS 模块一起使用。

这是NavBar.module.css中的解决方案-

.menubar > a[class="p-menubar-button"] {
    display: none !important;
}

【讨论】：