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)

“材质UI对话框”组件尝试访问props.theme.spacing.unit，但不存在此类属性，因为我的自定义主题已覆盖整个主题。

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

Answer 1

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

自定义JSS主题会覆盖材质UI主题吗？

1 个答案: