Custom JSS theme overwrites material UI theme?

Question

I'm using JSS themes to style my components, but it seems my custom JSS theme overwrites the JSS theme used by the Material UI components. I'm using material-ui 1.0.0-beta.22

It looks something like this:

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)

When rendering this component, it causes the following error:

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)

The Material UI Dialog component tries to access props.theme.spacing.unit, but no such property exists, as the whole theme has been overwritten by my custom theme.

Not sure if this is a bug or if I'm doing something wrong? Shouldn't JSS themes at least be merged? Am I missing some Material UI theming config?

Answer 1

Yes, they are using the same provider. If you want a different theming for your react-jss components, you can setup https://github.com/cssinjs/react-jss#theming a new namespace for theming, see "createTheming"