如何指定样式表在文档中出现的顺序？答案

【问题标题】：How to specify the order in which the style sheets appear in the document?如何指定样式表在文档中出现的顺序？
【发布时间】：2018-03-08 18:37:09
【问题描述】：

我有几个样式化的组件，使用withStyles HOC 来导出它们，但是我不能覆盖一些规则，因为 jss 将 mui 样式表的顺序与我的组件的样式表混合在一起。

如何将我的样式推到最后？

【问题讨论】：

标签： material-ui

【解决方案1】：

我和我的团队也偶然发现了这一点，我们设法找到了解决方案。显然 withStyles，将 option 对象作为参数。所以为了解决这个问题，你需要传递一个值为1的参数index。所以你得到的是这样的：

withStyles(styles, {index: 1})(yourComponent)

【讨论】：

根据这个（非常严格的）社区规则，我不能说谢谢。我也不能赞成您的回答，因为我对 stackoverflow 很烂，而且我的声誉太低。但是你的回答解决了我的问题。太好了……非常感谢！

【解决方案2】：

这在 Material UI 库的文档中包含 here。

CSS 注入顺序
Material-UI 为组件样式注入的 CSS 具有最高的特异性，因为 <link> 被注入到 <head> 的底部，以确保组件始终正确呈现。

但是，您可能还想覆盖这些样式，例如使用 styled-components。如果您遇到 CSS 注入顺序问题，JSS 提供了一种机制来处理这种情况。通过调整 insertionPoint 在 HTML 头部中的位置，您可以控制 CSS 规则应用于组件的顺序。

本质上，您创建一个注入点，然后让 JSS 将其用于插入样式的位置。这样做的选项包括创建 HTML 注释、创建 HTML 元素以及使用 Javascript 在 HTML 中创建注释（因为 create-react-app 在生产中去除了注释）

【讨论】：

谢谢，是的，我试过了。您可以在样式标签开始之前看到<noscript id="jss-insertion-point"> 标签。但这只是将每个样式表的插入点控制为一个块。我想要实现的是控制样式表的顺序，以便我的样式位于最后并正确覆盖 mui 样式