首页 文章

Material-ui覆盖反应情绪规则

提问于
浏览 次
3

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

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

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

哪里

const statNumber = css`padding: 0;`

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

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

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

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

production mode

这就是在 生产环境 模式中覆盖样式的原因 .

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

但是随着解决方案的提出，我无法改变情感和材料的顺序 - ui风格是有序的 . 我只能改变材料ui并将其向下移动

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

reactjs material-ui create-react-app emotion

1 回答

  • 9

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

    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样式都被指示放在那里，因此它们首先是有序的，并且可以被接下来的情绪规则所覆盖 .

    回复于

相关问题