问题标签 [themeprovider]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 打包一个自定义的 Material UI ThemeProvider 组件
我正在使用 Material UI 的 createMuiTheme API 及其 ThemeProvider 组件为我的公司创建一个 Material UI 主题。当我在其中包装原生 Material UI 组件时,主题按预期工作。我正在尝试做的是创建一个单独的复合 Material UI 组件库,我公司的其他开发人员可以将其作为依赖项包含在他们的项目中,然后将他们的根应用程序包装在 MUI ThemeProvider 组件中。一个通用的可重用组件库和一个通用主题,每个都单独存储和维护。在实践中,主题在原生 Material UI 组件上按预期工作,但对使用 Material UI 构建并使用 webpack 打包的复合组件没有影响。
当上面的根应用程序加载时,主题设置不会应用于 . 我在这里尝试做的事情可能吗?有没有我想念的“正确”方法来做到这一点?
reactjs - Material-UI 使用 makeStyles 覆盖样式
我正在做一个基于设计的项目。我使用的某些 Material-UI 组件附带了一些内置样式。我找到了一种使用 createMuiTheme 和 ThemeProvider 覆盖内置样式的方法,但是我在这个项目中的负责人希望我们将所有样式保留在 Material-UI 的 makeStyles (useStyles) 部分下。我的问题是,有没有办法使用 makeStyles 来覆盖我用 createMuiTheme 覆盖的样式?
这是我使用 ThemeProvider 的导航组件:
这是我使用 makeStyles 的样式文件夹:
我很感激可以在这个主题上提供的任何帮助,我已经搜索过,但似乎找不到一个好的解决方案。
reactjs - Material-UI ThemeProvider 会全局覆盖样式,而不仅仅是包装组件
我有一个带有多个 Material-UI 选择的 React 组件。现在我想覆盖其中一个的一些样式,所以我创建了一个主题,现在想通过 ThemeProvider 应用它。我的问题是 ThemeProvider 会覆盖每个 Select 的样式,而不仅仅是它所包裹的样式。
谷歌搜索时,我发现了很多问题,如何让 ThemeProvider 在全球范围内应用其覆盖,但这与我想要做的相反。我希望 ThemeProvider 仅将其覆盖应用到它所环绕的组件。 在我的用例中使用 ThemeProvider 是否有更好的选择?如果是,它必须与基于类的组件一起使用(因为我在这里使用了一个)
显示我的问题的 Codesandbox:https ://codesandbox.io/s/twilight-sun-vyl9i
我对 Material-UI 很陌生,所以如果我做错了什么,请原谅我。
javascript - Reactjs / Material UI => 当主题已经渲染时,MuiTheme 和重新渲染不起作用
我正在学习 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
reactjs - 为什么 ThemeProvider 会生成此错误?
所以我有点新反应,我正在尝试为我的网站设置一个切换主题。这些是我遵循的说明-“https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/”
注意:我的应用是一个 react + NetCore 应用。
每当我使用 ThemeProvider 这是我得到的错误:“错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一发生:
- 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
- 您可能违反了 Hooks 规则
- 您可能在同一个应用程序中拥有多个 React 副本,请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何调试和修复此问题的提示。”
这是我的 App.js 代码:
这是我的 package.json 文件:
这是全球风格:
这是themes.js:
这些是给我的建议,我已经尽可能地研究了它们,但没有运气。
- 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
- 您可能违反了 Hooks 规则
- 你可能在同一个应用程序中拥有多个 React 副本
android - Flutter Riverpod,如何避免使用消费者重建整个页面
我最近将 Provider 从我的项目中替换为 Riverpod,它与 firebase auth 一起使用以提供身份验证状态。
在我的登录页面上,我有两个用于电子邮件和密码的文本表单字段,并且我在消费者内部有登录按钮。我还添加了一个主题切换开关(使用 ThemeProvider 包的暗/亮模式),这就是问题发生的地方。
每次切换开关时,整个页面都会重建并清除字段?我为页面尝试了有状态/无状态/消费者小部件,但仍然无法解决这个问题。还尝试添加密钥仍然重建。
这是我的 loginpage.dart:
身份验证服务提供者:
AuthService.dart:
reactjs - React Mui Appbar 主题
我尝试对 MUI AppBar 进行主题化,但我对主题化一无所知。我可以在不使用样式组件或其他样式 api 的情况下为 AppBar 设置主题样式吗?
调色板.js
应用程序.js
reactjs - 在 createTheme 中覆盖 Box 组件
我有一个应用程序,它利用盒子来代替通常放置 div 以留在 MUI 生态系统中的位置。我的问题是,是否可以为所有框组件设置全局主题覆盖,就像您如何使用主题提供程序全局覆盖所有卡片的背景颜色一样。