Многофункциональный интерфейс пользователя AppBar CSS конфликт, вызванный положением проп

Question

В моем приложении есть две панели приложений с пользовательским интерфейсом. Первая панель приложений является частью макета страницы и отображается первой. Однако всякий раз, когда появляется второй, он добавляет на страницу дополнительный тег стиля, который портит первый AppBar и, следовательно, страницу. Второй AppBar:

<AppBar position="static" color="default>

и CSS, который он добавляет, выглядит следующим образом:

<style data-jss data-meta="MuiAppBar>...</style>

Теперь в заголовке уже есть элемент стиля с таким же CSS правила, которые отменяются этим. Я попытался использовать withStyle и className и поместить position prop в качестве CSS, чтобы изолировать правила CSS для второго AppBar, однако безрезультатно, так как проблема с подпорками. Каков стандартный способ справиться с этим? спасибо.

Редактировать 1: Пересмотрев два компонента, использующих AppBar, я кое-что понял. Один был импортирован так:

import AppBar from '@material-ui/core/AppBar/index'

, а другой:

import AppBar from '@material-ui/core/AppBar'

Когда я удалил '/index' с первого, то он исправился. Может кто-нибудь объяснить, что здесь происходит? спасибо.

Answer 1

import AppBar from '@material-ui/core/AppBar' - это правильный способ импорта компонента.

С https://material-ui.com/guides/minimizing-bundle-size/#option -1

Имейте в виду, что мы поддерживаем только в первую очередь и импорт второго уровня. Все более глубокое считается частным и может вызвать проблемы, такие как дублирование модулей в вашем комплекте.

Добавление /index превращает его в импорт третьего уровня и приводит к дублированию модулей и, следовательно, к дублированию стилей. .