Пользовательская тема JSS перезаписывает материал темы пользовательского интерфейса?

Я использую темы JSS для стилизации своих компонентов, но, похоже, моя пользовательская тема JSS перезаписывает тему JSS, используемую компонентами Material UI. Я использую 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 хотя бы объединяться? Я пропускаю какой-то конфиг темы Темы Материала

1 ответ

Решение

Да, они используют один и тот же провайдер. Если вы хотите создать другую тематику для ваших компонентов act-jss, вы можете настроить https://github.com/cssinjs/react-jss новое пространство имен для тем, см. "CreateTheming"

Другие вопросы по тегам