Position Prop导致的多个Material UI AppBar CSS冲突答案

【问题标题】：Multiple Material UI AppBar CSS conflict Caused By Postion PropPosition Prop导致的多个Material UI AppBar CSS冲突
【发布时间】：2020-04-16 15:27:29
【问题描述】：

我的应用程序中有两个 Material UI AppBar。第一个应用栏是页面布局的一部分，首先出现。但是，每当第二个出现时，它都会向页面添加一个额外的样式标签，这会弄乱第一个 AppBar 并因此破坏页面。第二个AppBar是：

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

它添加的CSS是这样的：

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

现在标题中已经有一个样式元素具有相同的 CSS 规则，这些规则会被它覆盖。我曾尝试使用 withStyle 和 className 并将 position prop 作为 CSS 来隔离第二个 AppBar 的 CSS 规则，但无济于事，因为问题出在 props 上。处理这个的标准方法是什么？谢谢。

编辑 1： 在重新审视使用 AppBar 的两个组件后，我意识到了一些事情。一个是这样导入的：

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

和其他：

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

当我从第一个删除 '/index' 时，它得到了修复。有人可以解释这里发生了什么吗？谢谢。

【问题讨论】：

一个工作的 codpen 或 jsfiddle 示例将很容易调试
拉入第二个 AppBar 元素不应导致将其他 MuiAppBar 样式添加到 <head>。发生这种情况的主要原因是，如果其中一个发生在嵌套主题中，或者您正在拉入 Material-UI 的多个副本并且两个 AppBar 元素正在由 Material-UI 的不同实例呈现。我建议您尝试创建一个code sandbox 来重现您的问题。
@RyanCogswell 你是对的，进口不一样。关心解释这里发生了什么？谢谢。

标签： reactjs material-ui

【解决方案1】：

import AppBar from '@material-ui/core/AppBar' 是导入组件的正确方式。

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

请注意，我们仅支持一级和二级导入。任何更深层次的东西都被认为是私有的，并可能导致问题，例如你的包中的模块重复。

添加/index 会将其转换为第三级导入并导致模块重复，从而导致样式重复。

【讨论】：