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

Question

I want a MenuBar with no hamburger button appearing while in responsive mode. I'm using CSS module to style my components. How can I completely remove hamburger menu button using CSS module? I can't find a way to access its specific HTML tag <a class="p-menubar-button" ...> and do Display: None.

MenuBar declaration in 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 in NavBar.module.css -

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

MenuBar component in plain 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

Turns out, it is easy to solve using CSS's child selector and attribute selector. I didn't know those selectors work with CSS module.

Here is the solution in NavBar.module.css -

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