Material-ui重写了React Emotion规则。

Question

在我的项目中，我使用Material-ui组件和react-emotion。让我举一个有问题的例子。我有这个元素：

<CardHeader title={stat} classes={{ root: statNumber }}/>

位置

const statNumber = css`padding: 0;`

这样我就可以用0覆盖CardHeader的默认填充（16px），这是我的意图。

在开发模式下，一切都按预期工作，但在生产中，padding: 0规则被默认填充16px覆盖。

原因是在开发模式下，样式是动态添加到header中的。首先是Material-UI样式，然后是情感样式。像这样：

但在生产中，样式布局方式相反

这就是在生产模式下样式被覆盖的原因。

Material UI对此提供了解释 https://material-ui.com/styles/advanced/#css-injection-order

但是，通过所提出的解决方案，我无法更改情感和Material-UI样式的顺序。我只能改变Material UI并将其移到更远的位置

有人有什么想法如何解决这个问题吗？？

- Nickey

Answer 1

通过改变样式规则的渲染顺序，问题已得到解决。我创建了一个需要包装整个应用程序的包装器。

import React from 'react'
import { create } from 'jss'
import JssProvider from 'react-jss/lib/JssProvider'
import { createGenerateClassName, jssPreset } from 'material-ui/styles'

const styleNode = document.createElement('style')
styleNode.id = 'insertion-point-jss'
document.head.insertBefore(styleNode, document.head.firstChild)

// Configure JSS
const jss = create(jssPreset())
jss.options.createGenerateClassName = createGenerateClassName
jss.options.insertionPoint = document.getElementById('insertion-point-jss')

function Provider (props) {
  return <JssProvider jss={jss}>{props.children}</JssProvider>
}

export default Provider

包装器在头部内创建一个元素作为第一个子元素。所有 material ui 样式都被指示放置在那里，因此它们是按顺序排列的，并且可以被紧随其后的 emotion 规则覆盖。

- Nickey

---

不错的发现。我希望有一个组件级别的解决方案，而不是需要包装您的应用程序的HOC。 - Con Antonakos

material-ui 的有关主题文档在此处 https://material-ui.com/guides/interoperability/#react-emotion（请参阅“注意事项”中的 CSS 注入顺序） - Bob B

@Bob B 我认为这不会起作用，因为material-ui仍然会在注入点之前放置他们的样式。 - Nickey

它可以工作。你只需要按照我在“注释”部分提到的CSS注入说明进行操作。其中一个选项与你在答案中提出的类似。我只是包含了一个链接到官方文档，因为它们还提供了其他选项。https://material-ui.com/customization/css-in-js/#css-injection-order - Bob B

Answer 2

官方文档现在展示了一种非常简单的方法来实现这个功能：

https://material-ui.com/styles/advanced/#css-injection-order

默认情况下，样式标签会在页面的元素中最后注入。它们比页面上的任何其他样式标签具有更高的特定性，例如CSS模块、Styled Components。

injectFirst

StylesProvider组件有一个injectFirst属性，可以将样式标签首先注入到头部（优先级较低）：

import { StylesProvider } from '@material-ui/core/styles';

<StylesProvider injectFirst>
  {/* Your component tree.
      Styled components can override Material-UI's styles. */}
</StylesProvider>

- abumalick