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

Question

我想要一个在响应模式下没有汉堡包按钮出现的菜单栏。我使用CSS模块样式我的组件。如何使用CSS模块完全删除汉堡包菜单按钮?我找不到一种方法来访问其特定的HTML标签<a class="p-menubar-button" ...>和Display: None。

NavBar.js中的菜单栏声明-

import { Menubar } from 'primereact/menubar'
import styles from './NavBar.module.css'
const NavBar = () => {
return (
<Menubar start={start} end={end} className={styles.menubar} />
)
}

CSS inNavBar.module.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>

Answer 1

事实证明，使用CSS的子选择器和属性选择器很容易解决。我不知道这些选择器可以用CSS模块。

NavBar.module.css-

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