Пользовательская тема 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"