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 模块、样式组件）更具特异性。

首先注入

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

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

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