Блог

Я хочу, чтобы панель меню без кнопки гамбургера появлялась в режиме реагирования. Я использую модуль 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 в NavBar.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>
 

Оказывается, это легко решить с помощью дочернего селектора CSS и селектора атрибутов. Я не знал, что эти селекторы работают с модулем CSS.

Вот решение в NavBar.module.css —

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