gpt4 book ai didi

reactjs - MUI ThemeProvider 未在已编译组件中注入(inject)主题

转载 作者:行者123 更新时间:2023-12-04 10:43:41 25 4
gpt4 key购买 nike

所以我有这两个使用 MUI 的项目。其中一个只包含小的功能组件(一个库),另一个通过 yarn link 导入组件的“库”,并且应该通过“ThemeProvider”应用自定义主题。

我使用故事书作为我的组件列表。为了看到所有工作都按预期进行,我使用了故事书的插件:'storybook-addon-material-ui'。

我如何定义故事的示例代码:

storiesOf('Tile', module)
.addDecorator(muiTheme([myCustomTheme]))
.add('Default', withInfo()(() => (
<div>
<Tile title="Title goes here" />
</div>
)))

Storybook 显示了我想要的确切结果。我的自定义主题也从图书馆项目中导出。当我在我的工作项目(导入库的项目)中使用它时,我通过 定义了主题
import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
在第一个可能的包装组件中:

class Layout extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
// Provider, Routing, etc
</MuiThemeProvider>
)
}

}

结果:我的工作项目中的每个 MUI 组件,除了我的库组件之外,都在我的自定义主题中设置了样式。但是,我的自定义组件在核心中的基本 MUI 主题中设置了样式。

当我使用已经用脚本构建的组件时:

BABEL_ENV=production babel src -d lib --ignore src/**/*.story.jsx,src/**/*.spec.js,src/**/*.test.js

我是否遗漏了一些我需要给我的自定义组件的设置,以便它们使用我的 MUI 提供的主题?

最佳答案

所以这与在这个非常常见的问题中观察到的不良行为相同:https://github.com/facebook/react/issues/13991 .在我的例子中,由于 yarn link,我有两个 Material UI 实例。我通过在我的 webpack 中创建别名解决了这个问题:

config.resolve = {
...config.resolve,
alias: {
react: path.resolve("./node_modules/react"),
'@material-ui': path.resolve("./node_modules/@material-ui")
}
};

关于reactjs - MUI ThemeProvider 未在已编译组件中注入(inject)主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59820133/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com