Ящик MUI не рендеринг в Web Gnome 46.2 и Safari, но работает в Firefox, Chrome и Edge ⇐ CSS

[Anonymous]

Я использую компонент Material-ui
< /code> в моем приложении React, изначально основанном на стартере Enlite (MUI 4), но я модернизировал его до MUI 5. Ящик воспроизводит и отлично работает в Firefox , Chrome и Edge, но в Web Gnome 46.2 и Safari 18.2, он существует в DOM, но не видно. < /p>
Странно Поведение: < /p>
Если я добавляю случайный символ (например, "C") или даже (не разрушающее пространство) раньше, ящик внезапно появляется: < /p>

Код: Выделить всё

  const lgDown = useMediaQuery(theme => theme.breakpoints.down('lg'));
//...
{!lgDown && (
  {/* Adding a space makes the drawer visible */}

)}
< /code>
Что я попробовал: < /p>
[list]
[*]  подтвержден  < /code> существует в DOM (я вижу его границу при применении границы: 2px Solid Red). < /P>
< /li>
  Проверено console.log (document.queryselector (". Muidrawer-root"). innerhtml); 

→ существует содержание внутри.

[*]
Заменен на → работает нормально, поэтому проблема специфична для MUI.

[*] Изменение устаревший компонент MUI с Usemediaquery .

[/list]
Вопрос:

• Почему добавление символа или & nbsp; < /code> до < /code> создает < /code> Виден в веб -странице GNOME 46.2 и Safari? нужен обходной путь?

Подробнее здесь: https://stackoverflow.com/questions/794 ... refox-chro