时间戳

首页 > 解决方案 > 如何删除 PrimeReact 的菜单栏中的菜单栏按钮？

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

问题描述

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

MenuBar 声明在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 NavBar.module.css-

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

纯 HTML 中的 MenuBar 组件 -

<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>

标签： reactjscss-modulesprimereact

解决方案

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

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

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

推荐阅读