3

我正在使用 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 Dialog 组件尝试访问 props.theme.spacing.unit，但不存在这样的属性，因为整个主题已被我的自定义主题覆盖。

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

4

1 回答 1

1

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

于 2017-12-07T14:36:36.787 回答