Reactjs 自定义JSS主题覆盖材质UI主题?
我使用JSS主题来设计我的组件,但是我的自定义JSS主题似乎覆盖了MaterialUI组件使用的JSS主题。我正在使用材质ui 1.0.0-beta.22 它看起来像这样:Reactjs 自定义JSS主题覆盖材质UI主题?,reactjs,themes,material-ui,jss,Reactjs,Themes,Material Ui,Jss,我使用JSS主题来设计我的组件,但是我的自定义JSS主题似乎覆盖了MaterialUI组件使用的JSS主题。我正在使用材质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
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)
“材质UI”对话框组件尝试访问props.theme.spating.unit,但不存在此类属性,因为整个主题已被我的自定义主题覆盖
不确定这是个bug还是我做错了什么?JSS主题是否至少应该合并?我是否缺少一些材质UI主题配置?是的,它们使用的是同一个提供程序。如果您想为react jss组件设置不同的主题,可以为主题设置一个新的名称空间,请参阅“createTheming”是否需要在每个使用它的组件中导入此名称空间并将其传递到
injectSheet
,即injectSheet(样式,{customTheming})
?我现在在我的组件中遇到以下错误:-警告:失败的上下文类型:上下文\uuu主题
在Jss(FormDesignerToolbar)
中标记为必需,但其值是未定义的
-未捕获错误:[未定义]请使用ThemeProvider以便能够与主题一起使用我正在导入我的命名空间主题并将其传递给injectSheet
,方法是将我的导入从import customTheme从“../path/to/custom/theme”更改为导入主题从“../path/to/custom/theming”和injectSheet(样式),{customTheme})
到injectSheet(styles,{theming})
(即将导入名称从customTheme更改为theming)它现在可以工作了。但这感觉很麻烦-我是做错了,还是必须在使用它的每个组件中导入自定义主题对象?
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)