问题标签 [themeprovider]

我有一个父主题，我想在同一页面上有一个使用不同主题的按钮。

我的按钮当前使用的主题文件：

我想使用特斯拉主题出现的地方：

这是我第一次尝试使用主题。父主题按预期呈现，但使用 tesla 主题的按钮正在工作，但 font-family... 仍在显示父主题 font-family。我有一个全局 CSS 文件，我在其中设置了字体......见下文：

我在 Button 组件中使用了“brand-font-regular”。不知道我哪里出错了......任何帮助将不胜感激

我正在尝试复制 MUI Drawer 页面上的“迷你抽屉”示例：

https://mui.com/components/drawers/#mini-variant-drawer

但是一旦我将它包装在 ThemeProvider 中，即使引用的主题为空，布局也会中断。见下文：

（注意：此代码是网站上迷你抽屉示例的精确副本）

看起来 ThemeProvider 使抽屉和主体重叠而不是相互“推”。删除 ThemeProvider（并回到 MUI 网站上的示例设置方式）立即修复它。

当然，在我的实际用例中，我想要一个浅色和深色主题，但似乎即使是没有任何设置的单个主题也会破坏代码。

这是一个 CodeSandbox，显示了 App.js 和 theme.js 是如何设置的：

https://codesandbox.io/s/react-mui-theme-breaks-drawer-u5sg0

这是 MUI 中的错误还是我做错了主题？

预先感谢您的帮助。

我想开始使用 bit.dev 跨多个应用程序管理 React 组件。每个应用程序都包含一个主题提供程序。

bit.dev 游乐场无法呈现组件，因为它们试图使用主题，但它们没有包含在主题提供程序中。

有没有办法将所有组件包装在提供程序中，但仅在操场 UI 中使用时？

我有一个theme这样的：

和一个ThemeProvider：

我怎样才能进入下面的red color内部styles？我尝试过这样的事情，但效果不佳。我正在使用React Native.

我必须将 DarkMode 开关添加到适用于 React Native IOS App 中所有屏幕的屏幕之一。

下面是我将主导航器包装在 ThemeProvider 中的 App.js

下面是 FRNavigator，它具有设置 DarkMode 的设置页面。

FRNavigator.js

下面是设置页面，我在其中添加了切换按钮来设置 DarkMode：Settings.js

如果我运行上面的程序，当我切换开关时，什么也没有发生。谁能说如何添加 Settings.js 页面以与 FRNavigator 一起使用以支持暗模式切换开关。提前致谢。

我花了几天时间尝试自定义原色并在调色板中添加另外两种颜色。我能够正确地声明新颜色......但目前看到按钮上反映的那些新颜色不起作用。即使我包裹在 Themeprovider 下，该按钮也会采用默认属性。我正在使用故事书。

这是 默认按钮样式的外观

ThemeProvider 自定义调色板

如您所见，ThemeProvider 具有调色板颜色定义......但有些按钮不接受它。提前致谢

我一直在尝试将 ThemeProvider 从 styled-components 集成到现有项目中。但是在样式表中访问主题项时遇到以下错误：

在摆弄了一下之后，我找到了问题的根源。在我一直关注的教程中，所有样式化的组件都定义在与使用它的组件相同的文件中（即Container在App.js中定义）。在我正在处理的项目中，所有样式组件都在单独的样式表中定义（因此Container将位于App.styles.js中，然后将其导入App.js）。

将样式化组件从 App.styles.js 移动到 App.js 解决了这个问题。但是，是否可以让样式表访问 Themeprovider？

我一步一步地设置我的 rtl 配置v5mui。使用：

• 作为风格引擎的情感
• 手写笔 v4
• stylis-plugin-rtl v2

一切都很好，但是当使用一些复杂的组件时，我的应用程序外观崩溃了。终端中有一个警告，我认为这将是答案……但我不明白。

我已经使用 theme.js 文件利用情感和样式系统对我的网站进行了样式设置，并希望在前端显示值（例如 #141414）与令牌名称（例如 bgPrimary）。

显然，当我在实践中使用令牌时，我的网站背景是正确的值，但我也想在前端展示令牌名称和值（出于文档目的）。

我经常使用它的一个例子是这样的：

background-color: ${props => props.theme.colors.bgPrimary)

但是，如果我想在 Text 组件的前端显示 bgPrimary 的值，如下所示：

<Text value={___} />

我如何在不实际硬编码 HEX 值的情况下返回值 #141414？

以下是主题文件中颜色对象当前的外观：

如您所见，我有两种颜色模式，并且 bgPrimary 根据您设置的模式而有所不同。这就是为什么从主题中提取价值而不是硬编码很重要的原因。

我正在开发一个 ReactJS 项目，其中一些组件是用 Material-UI 包装的。但是 App 全局主题会覆盖组件样式。有没有办法禁用特定组件的全局样式？