最近我一直在尝试material-ui，并且在处理样式方面存在一些问题。尽管大多数Material-UI样式化方法确实非常直观并且易于弄清，但由于有很多样式化零件的方法，因此它可能会有些混乱。在某些情况下，似乎只有一种方法是正确的，并且通过反复试验来查看哪种方法是正确的，或者在stackoverflow上发布问题，这很繁琐。
就像我问的问题How to set the zIndex on the drawer component一样，设置组件的z-index的唯一方法是使用style道具通过内联样式。由于material-ui似乎使用内联样式设置了抽屉组件的样式。这让我感到困惑，因为我认为每个组件css“类”都有一种“全局”样式，并且它传递了这些css“类”并在组件上设置了样式。所以现在我在组件上具有className，classes和style道具来设置其样式。
问题是->如何知道material-ui使用哪种方法（主题，全局，内联）在组件上设置特定样式，从而知道哪种方法（主题，全局，hook，自定义css文件，内联）我可以用来更改特定样式。
这些方法的特殊性是什么，显然内联方法最多，但是关于其他方法（主题，全局，钩子和自定义css文件）
答案 0 :(得分：1)
在Material-UI中很少使用内联样式。 Modal（由Drawer使用）已从使用CSS类更改为在v4中使用内联样式，以减少使用Material-UI的Modal作为基础的开发人员的捆绑包大小无需使用任何其他Material-UI代码即可构建其他模态。 Material-UI中几乎所有样式都是通过使用JSS生成的CSS类完成的。内联样式的其他大多数情况都用于动态确定的定位（例如Popper和Popover）或用于过渡的动画。很少尝试覆盖其他内联样式的情况。
为了更好地理解特异性，我建议阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity。如果特异性相同，则样式表的顺序将确定哪个胜出（最后一个胜出），这就是注射顺序很重要的原因（如此处的文档https://material-ui.com/styles/advanced/#css-injection-order所示）。通常，您只需要担心当您使用一个来源的CSS（例如，样式组件或情感）来覆盖另一来源的CSS（例如，JSS生成的默认Material-UI样式）时。