Material-ui覆盖反应情绪规则

Question

在我的项目中，我使用Material-ui组件以及react-emotion。

让我举一个有问题的例子。 我有这个元素：

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

其中

const statNumber = css`padding: 0;`

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

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

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

但是在制作中，风格是相反的。

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

材料ui对此提供了解释 https://material-ui-next.com/customization/css-in-js/#css-injection-order

但是提出的解决方案我不能改变情感的顺序和材料 - ui样式是有序的。我只能改变材料ui并进一步向下移动

任何人都知道如何解决这个问题？

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

包装器创建一个元素作为头部内的第一个子元素。所有材料ui样式都被指示放在那里，因此它们首先是有序的，并且可以被接下来的情绪规则所覆盖。

Answer 2

官方文档现在显示了一种非常简单的方法：

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

默认情况下，样式标签最后注入到页面的元素中。它们比您页面上的其他任何样式标签都更具特异性。 CSS模块，样式化的组件。

injectFirst

StylesProvider组件具有一个injectFirst道具，可以将样式标签首先插入头部（优先级较低）：

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

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