问题标签 [themeprovider]

我正在使用 Material UI 的 createMuiTheme API 及其 ThemeProvider 组件为我的公司创建一个 Material UI 主题。当我在其中包装原生 Material UI 组件时，主题按预期工作。我正在尝试做的是创建一个单独的复合 Material UI 组件库，我公司的其他开发人员可以将其作为依赖项包含在他们的项目中，然后将他们的根应用程序包装在 MUI ThemeProvider 组件中。一个通用的可重用组件库和一个通用主题，每个都单独存储和维护。在实践中，主题在原生 Material UI 组件上按预期工作，但对使用 Material UI 构建并使用 webpack 打包的复合组件没有影响。

当上面的根应用程序加载时，主题设置不会应用于 . 我在这里尝试做的事情可能吗？有没有我想念的“正确”方法来做到这一点？

我正在做一个基于设计的项目。我使用的某些 Material-UI 组件附带了一些内置样式。我找到了一种使用 createMuiTheme 和 ThemeProvider 覆盖内置样式的方法，但是我在这个项目中的负责人希望我们将所有样式保留在 Material-UI 的 makeStyles (useStyles) 部分下。我的问题是，有没有办法使用 makeStyles 来覆盖我用 createMuiTheme 覆盖的样式？

这是我使用 ThemeProvider 的导航组件：

这是我使用 makeStyles 的样式文件夹：

我很感激可以在这个主题上提供的任何帮助，我已经搜索过，但似乎找不到一个好的解决方案。

我有一个带有多个 Material-UI 选择的 React 组件。现在我想覆盖其中一个的一些样式，所以我创建了一个主题，现在想通过 ThemeProvider 应用它。我的问题是 ThemeProvider 会覆盖每个 Select 的样式，而不仅仅是它所包裹的样式。

谷歌搜索时，我发现了很多问题，如何让 ThemeProvider 在全球范围内应用其覆盖，但这与我想要做的相反。我希望 ThemeProvider 仅将其覆盖应用到它所环绕的组件。 在我的用例中使用 ThemeProvider 是否有更好的选择？如果是，它必须与基于类的组件一起使用（因为我在这里使用了一个）

显示我的问题的 Codesandbox：https ://codesandbox.io/s/twilight-sun-vyl9i

我对 Material-UI 很陌生，所以如果我做错了什么，请原谅我。

我正在学习 React，并尝试使用 Material Ui 进行 UI 设计。

我已经按照一些示例来了解谁管理自定义主题和 MuiTheme。现在我对 MuiTheme 和 MuiThemeProvider 很感兴趣。

在我的示例中，我定义了 3 个简单的 MuiTheme 覆盖（红色、绿色、蓝色）。

当我们单击尚未渲染的主题的按钮时，主题切换器工作正常。当我单击按钮切换器以获取已重新设计的主题时，前视图中没有任何附加或任何内容。事实上，如果我们查看 react development puglin，我们会看到背景颜色按预期变化良好，但界面没有刷新。由于主题已加载到内存中，因此问题看起来像重新渲染条件永远不会成立。

你能帮我理解为什么我不能回到旧主题吗？

对于复制过程，您可以按您想要的绿色按钮、下一个蓝色按钮和下一个所有按钮。

我的代码可以在这里查看和播放： https: //codesandbox.io/s/material-ui-theme-test-w1bbg App.js

index.js

主题.js

我需要使用两个不同的库@setproduct-ui并@pancakeswap/uikit为应用程序中的不同组件提供主题。我的App.js长相是这样的——

以下是ThemeContext.tsx

所以我有点新反应，我正在尝试为我的网站设置一个切换主题。这些是我遵循的说明-“https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/”

注意：我的应用是一个 react + NetCore 应用。

每当我使用 ThemeProvider 这是我得到的错误：“错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一发生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何调试和修复此问题的提示。”

这是我的 App.js 代码：

这是我的 package.json 文件：

这是全球风格：

这是themes.js：

这些是给我的建议，我已经尽可能地研究了它们，但没有运气。

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 你可能在同一个应用程序中拥有多个 React 副本

我最近将 Provider 从我的项目中替换为 Riverpod，它与 firebase auth 一起使用以提供身份验证状态。

在我的登录页面上，我有两个用于电子邮件和密码的文本表单字段，并且我在消费者内部有登录按钮。我还添加了一个主题切换开关（使用 ThemeProvider 包的暗/亮模式），这就是问题发生的地方。

每次切换开关时，整个页面都会重建并清除字段？我为页面尝试了有状态/无状态/消费者小部件，但仍然无法解决这个问题。还尝试添加密钥仍然重建。

这是我的 loginpage.dart：

身份验证服务提供者：

AuthService.dart：

我正在尝试使用 Material UI 为我的应用创建自定义主题。看看如何做，我发现我必须使用 createTheme 和 ThemeProvider。但是由于某种原因，我的主题没有覆盖默认主题。在下面的代码中，您将能够看到我尝试用棕色覆盖原色，但默认的蓝色仍然存在。

使成为：

有什么线索吗？

我尝试对 MUI AppBar 进行主题化，但我对主题化一无所知。我可以在不使用样式组件或其他样式 api 的情况下为 AppBar 设置主题样式吗？

调色板.js

应用程序.js

我有一个应用程序，它利用盒子来代替通常放置 div 以留在 MUI 生态系统中的位置。我的问题是，是否可以为所有框组件设置全局主题覆盖，就像您如何使用主题提供程序全局覆盖所有卡片的背景颜色一样。