9

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

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

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

在哪里

const statNumber = css`padding: 0;`

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

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

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

但在生产中，风格是相反的

生产方式

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

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

但是通过提出的解决方案，我无法更改情感的顺序，并且材料-ui 样式是有序的。我只能更改材质ui并将其进一步向下移动

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

4

2 回答 2

12

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

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 内的第一个子元素。所有材质 ui 样式都被指示放置在那里，因此它们按顺序排列在首位，并且可以被接下来的情感规则覆盖。

于 2018-02-15T11:55:13.383 回答
4

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

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

默认情况下，样式标签最后注入页面元素。它们比您页面上的任何其他样式标记（例如 CSS 模块、样式化组件）获得更多的特异性。

先注入

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

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

<StylesProvider injectFirst>
  {/* Your component tree.
      Styled components can override Material-UI's styles. */}
</StylesProvider>
于 2020-08-08T17:15:03.227 回答