Материал UI Drawer компонента добавляет нежелательную тень, когда не в фокусе - PullRequest
Новая
       18

Материал UI Drawer компонента добавляет нежелательную тень, когда не в фокусе

0 голосов
/ 01 февраля 2020

У меня проблемы с использованием компонента Material UI Drawer. Когда я пытаюсь отобразить его на своей веб-странице, он пытается навести фокус на внутренний div и добавляет тень или границу к компоненту, если вы сфокусированы где-либо еще.

Кто-нибудь знает, что вызывает это тень должна появиться и как ее отключить? Пример скриншота ниже - вы увидите синий край внизу (это то же самое, если я изменю размер элемента),

Как только вы нажмете на содержимое внутри Drawer, например, List элемент тень уходит. Я предполагаю, что это должно быть как-то связано с модальностью компонента? 

<Drawer PaperProps={{ className: classes.floatingMenu }} anchor='top' open onClose={() => {}}>
    <div className={classes.dummy}>
    </div>
</Drawer>

Примечание. Класс floatingMenu добавляет поле только в верхней части 55px (т.е. высота AppBar - больше ничего).

enter image description here

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

Я смог решить эту проблему немного проще c после прочтения do c. На странице Modal указано:

Обратите внимание, что можно отключить контур (часто синий или золотой) с помощью свойства outline: 0 CSS.

Исходя из этого, я не касался компонента или внутренних компонентов из своего вопроса, а вместо этого просто добавил один дополнительный CSS класс outline: 0 к floatingMenu (который уже передан в PaperProps ): 

floatingMenu: {
    marginTop: '55px',
    outline: 0
}

Это решило проблему, и я больше не вижу синюю границу тени.

0 голосов
/ 09 марта 2020

Это несколько сложно, но возможно только с некоторыми опорами и стилем. Элемент, который затеняет остальную часть пользовательского интерфейса, является компонентом Backdrop компонента Modal. Drawer использует Modal, когда он находится во временном режиме. hideBackdrop реквизит Modal контролирует, виден ли оттенок или нет, и вы можете напрямую передать этот реквизит Drawer.

Однако сам компонент Modal все равно будет охватить весь видовой экран, не позволяя вам щелкать другие области пользовательского интерфейса до закрытия Drawer. Я не уверен, есть ли более простой способ, но по крайней мере вы можете сделать это, просто используя стиль CSS, чтобы сделать элемент Modal «сквозным», установив для pointer-events значение none. Чтобы восстановить «кликабельность» самого ящика, вы должны затем установить для его pointer-events значение all.

Так, например, просто используйте опору style для создания простого встроенного стиля: 

<Drawer hideBackdrop style={{ pointerEvents: 'none' }}>
  <div style={{ pointerEvents: 'all' }}>
    I'm a sidebar!
  </div>
</Drawer>

Рабочий пример

Если вы работаете с стилевым решением Material UI, вы также можете передать правило стиля pointer-events собственному Drawer. Paper через classes проп.

...