样式的特异性和实现的区别 -> 全局、主题、钩子、自定义 css 和内联样式答案

【问题标题】：The difference between specificity and implementation of styles -> global, theme, hooks, custom css and inline styles样式的特异性和实现的区别 -> 全局、主题、钩子、自定义 css 和内联样式
【发布时间】：2020-12-30 22:06:49
【问题描述】：

最近我一直在尝试使用 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 使用哪种方法（主题、全局、内联）在组件上设置特定样式，从而知道哪种方法（主题、全局、挂钩、自定义 css 文件， inline) 我可以用它来改变那个特定的样式。

还有这些方法的特殊性是什么，显然内联将拥有最多，但关于其他（主题、全局、钩子和自定义 css 文件）

【问题讨论】：

@RyanCogswell 感谢您的回复。只有 Modal 使用内联样式吗？还是有其他组件？因为我认为官方文档中没有任何关于它的内容。此外，我确实了解 css 特异性规则，但对文档 material-ui.com/styles/advanced/#css-injection-order 中指定的 css 注入顺序内容感到困惑（尤其是插入点内容）。
@RyanCogswell 再次感谢您的帮助。我很担心，因为我使用 React CSS 模块和 material-ui 样式 hooks (makeStyles, withStyles, etc) 。我使用mui hooks 设置动态或基于主题的样式，并使用React CSS module 设置所有其他样式。我这样做是因为我不喜欢 jss 把我的业务逻辑代码弄得乱七八糟。

标签： reactjs material-ui

【解决方案1】：

在 Material-UI 中使用内联样式非常少见。 Modal（由 Drawer 使用）在 v4 中从使用 CSS 类更改为使用内联样式，以减少开发人员使用 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 来覆盖来自另一个来源（例如由 JSS 生成的默认 Material-UI 样式）的 CSS 时，您通常只需要担心这一点。

【讨论】：