位置属性引起的多个Material UI AppBar CSS冲突

Question

我的应用程序中有两个Material UI AppBar。第一个应用栏是页面布局的一部分，并首先显示。但是，每当第二个出现时，它都会在页面上添加一个额外的样式标签，从而使第一个AppBar和整个页面混乱。第二个AppBar是：

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

及其添加的CSS如下：

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

现在，标头中已经存在具有相同CSS规则的style元素，这些元素将被覆盖。 我尝试使用withStyle和className并将 position prop 作为CSS来隔离第二个AppBar的CSS规则，但是由于问题在于道具没有用。处理此问题的标准方法是什么？谢谢。

修改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会将其转换为第三级导入，并导致模块重复，从而导致样式重复。