自定义 JSS 主题覆盖 material UI 主题？

Question

我正在使用 JSS 主题来设置我的组件的样式，但我的自定义 JSS 主题似乎覆盖了 Material UI 组件使用的 JSS 主题。我正在使用 material-ui 1.0.0-beta.22

看起来像这样：

import React from 'react
import injectSheet, {ThemeProvider} from 'react-jss
import Dialog from 'material-ui/Dialog'

const theme = {
  background: 'blue'
}

const styles = theme => ({
  container: {
    background: theme.background,
  }
})

const Demo = () => (
  <ThemeProvider theme={theme}>
    <div className={props.classes.demo}>
      <Dialog />
    </div>
  </ThemeProvider>
)

export default injectSheet(styles)(Demo)

渲染此组件时，导致以下错误：

Uncaught TypeError: Cannot read property 'unit' of undefined
    at styles (Dialog.js?9662:87)
    at Object.create (getStylesCreator.js?6ed6:29)
    at Style.attach (withStyles.js?deb5:328)
    at Style.componentWillMount (withStyles.js?deb5:258)
    at callComponentWillMount (react-dom.development.js?cada:9777)
    at mountClassInstance (react-dom.development.js?cada:9834)
    at updateClassComponent (react-dom.development.js?cada:10216)
    at beginWork (react-dom.development.js?cada:10605)
    at performUnitOfWork (react-dom.development.js?cada:12573)
    at workLoop (react-dom.development.js?cada:12682)

Material UI 对话框组件尝试访问 props.theme.spacing.unit，但不存在这样的属性，因为整个主题已被我的自定义主题覆盖。

不确定这是错误还是我做错了什么？至少不应该合并 JSS 主题吗？我是否缺少一些 Material UI 主题配置？

Answer 1

是的，他们使用的是同一个提供商。如果你想为你的 react-jss 组件设置不同的主题，你可以设置 https://github.com/cssinjs/react-jss#theming 一个新的主题命名空间，参见 "createTheming"

自定义 JSS 主题覆盖 material UI 主题？

Custom JSS theme overwrites material UI theme?

themes

reactjs

material-ui

jss