问题标签 [themeprovider]

我一直在使用 react native 元素。我想为我的应用程序实现暗模式，但由于某种原因，<ThemeProvider/>当我在上下文中的状态发生变化时，我无法让主题道具改变。

这是我的上下文，其中有我的 darkTheme 和 lightTheme 对象。我也有一个lightThemeStateusing useState，因此我可以从子组件设置该状态。

因为我有另一个用于其他逻辑的上下文。我结合<ThemeContextProvider/>我的其他上下文<JourneyContextProvider/>。像这样：

然后最后我将整个应用程序包装在我的<CombinedStoreProvider/>. 像这样。

这是我lightThemeState在上下文中切换的子组件。但即使一切看起来都很棒ThemeContextProvider（我控制台记录了状态和背景颜色，他们已经成功地改变了主题）。但是在这个组件中，我只得到了以前的主题。即使这个子组件在我切换lightThemeState. 我知道这一点，因为在我切换主题后控制台登录该组件再次记录，但日志显示以前的主题颜色。这是子组件：

也许你问的darkTheme和lightTheme有问题？不，如果我将状态从 true 更改为 false 并重新加载应用程序。有用。不知何故，主题在<ThemeProvider theme={currentTheme}/>. 有人可以解释为什么吗？

我想创建一个组件

但是显示错误

'Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "slot" 类型上不存在属性 'colorVariant' | “风格” | “标题” | ... 252 更多... | "css"> & { ...; } & ThemeProps<...>'。

这是我设置的主题

反应管理员版本：3.8.4

我有一个 react-admin 应用程序，我正在尝试在浅色和深色主题之间切换。

您可以在下面看到Theme.js，我在其中导出了具有默认主题覆盖的两个对象，如文档中所述。( https://material-ui.com/pt/customization/default-theme/ )

我还做了一个 customReducer，如下所示，名为ThemeReducer.js

为了调度状态，还有一个动作（ThemeAction.js）：

要设置自定义减速器，如文档中所述，我在<Admin>属性自定义减速器上设置如下：

要在主题之间切换并设置到商店中，我正在使用此配置页面：

所有这些结构都工作正常，我的意思是全局状态主题正在正确更新，因此减速器正在获取单击的主题并切换状态。

问题是，如文档中所述，要更改默认主题，我们必须将新主题作为标签上的属性传递，<Admin>例如：<Admin theme={theme}> </admin> 但是标签<Admin>被设置到 App.js 中，并且 redux 上下文不在应用程序，因此无法将全局主题状态放入其中。

然后我的问题是如何使用我创建的全局主题状态作为应用程序主题传递。

正如您在下面看到的，我已经尝试将其作为 Layout 的父级传递，但主题并未反映在应用程序上。

布局.js

应用程序.js

感谢任何帮助。问候

我对反应还很陌生，我正在使用 Material-UI 实现一些新功能。我正在尝试在当前主题本地存储在浏览器中时在浅色和深色主题之间切换。我希望在页面刷新时本地存储当前主题。默认情况下，我的应用会加载到浅色主题中。在切换开关之前，我确认轻主题在本地存储中。当我切换到深色主题时，我的应用程序会更改为对应的应用程序，并且本地存储中的值会按预期更改。但是当我尝试将开关切换回浅色主题时，主题并没有改变，只是我的本地存储值。我不知道为什么。

如果有人可以调整此代码以解决此问题或提出新想法，我将不胜感激。

CodeSandbox 中的演示

CustomThemeContext.js

index.js

应用程序.js

我的主题.js

我想了解是否可以通过从用户获取输入和管理状态来使用 ThemeProvider 更改主题值。

我有一个包装在 ThemeProvider 中的应用程序来管理主题。

在设置视图中，用户必须能够输入颜色值。

（这里的 ColorTest 组件用于测试目的。它实际上向我展示了所有数据都正确传递并且颜色发生了变化。）

这是我的“主题”

该新值必须更改原色的颜色值并触发应用组件重新渲染。我如何在不使用本地存储或数据库的情况下实现这一点，而只是陈述？

我是 Next JS 的新手，无法弄清楚为什么我的 ThemeProvider 没有接收和使用我的背景颜色。

我觉得我已经正确地复制了教程，所以我必须接近正确吗？

我的错误是TypeError: Cannot read property 'background' of undefined

globals.js

_app.js

主题.js

你将如何在 React 中添加一个全局 css 文件作为自定义 ThemeProvider 组件？我正在为 NPM 构建一个组件库。因此，它将使另一个 React 应用程序能够全局使用 css 文件。

我试过创建一个这样的：

我正在尝试实现 ThemeProvider 但收到错误 'ThemeProvider' is not export from '@material-ui/core/styles' 这是代码

这就是我导入的方式

从“@material-ui/core/styles”导入 { createMuiTheme, ThemeProvider }；

我已经使用 NPM 安装了 material-ui/styles 但没有解决我的问题。

提前致谢

语境

我正在尝试使用 Material UI 构建可共享的自定义组件（即自定义库）。我的项目是一个具有以下结构的单声道存储库：

docs有以下dependencies（1）：

material-ui-<lib>没有任何dependencies，但以下peerDependencies和devDependencies（2）：

<root>与or (3)没有任何dependencies关系。devDependenciesmaterial-uireact

使用的主要技术：

• webpack
• material-ui
• yarn（带工作区）
• storybook
• react
• typescript
• babel

问题

当我在 上应用新的主题提供程序时docs，一切正常，但在我导入的那一刻material-ui-<lib>，主题提供程序被忽略。

尝试

我知道这@material-ui/styles是一个单例，因此需要将其视为唯一的。运行时yarn list @material-ui/styles，我只收到 1 个模块，而不是多个。

感谢您在此问题上的帮助。

寻找一种将颜色从主题传递到 React 图标的方法。主题工作正常，我可以将颜色传递给我的样式组件。这是细分：

index.js：

app.js（精简）：

相当于：

确实有效，我确实尝试过：

导航元素.js：

应用程序.js：

但我得到一个儿童错误。尝试来自阅读 Q&A Styled-components 和 react-icons <IconContext.Provider> 组件

我没有找到的其他问答：

• 如何设置 React-Icon 样式
• react-icons 应用线性渐变

使用 Styled Components 中的主题颜色，我如何将该颜色传递给 React Icons Provider？