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

Question

我想要 MenuBar with no 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} />
  )
}

CSS 在 NavBar.module.css -

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

普通的 MenuBar 组件 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>

Answer 1

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

这是NavBar.module.css-

中的解决方案

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

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

How to remove menubar-button in PrimeReact's MenuBar?

reactjs

css-modules

primereact