Material-ui 覆盖反应情绪规则

Question

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

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

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

哪里

const statNumber = css`padding: 0;`

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

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

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

但在生产中，样式是相反的

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

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

但是根据提出的解决方案，我不能改变情感的顺序，material-ui 样式是有序的。我只能改materialui再往下移

有人知道如何解决这个问题吗？？

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

包装器创建一个元素作为 head 中的第一个子元素。所有 material ui 样式都被指示放置在那里，因此它们按顺序排在第一位，并且可以被接下来的情感规则覆盖。

Answer 2

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

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

By default, the style tags are injected last in the element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.

injectFirst

The StylesProvider component has an injectFirst prop to inject the style tags first in the head (less priority):

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

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

Material-ui 覆盖反应情绪规则

Material-ui overrides react emotion rules

emotion

reactjs

material-ui

create-react-app

injectFirst