[material-ui] 使用多个experimental_extendTheme调用组合主题时抛出错误

qncylg1j  于 5个月前  发布在  其他
关注(0)|答案(3)|浏览(50)

复现步骤

  1. 创建一个新的React项目并安装MUI
  2. 多次调用experimental_extendTheme,并为其中任意一次调用传入一个Theme对象

当前行为

将调用链式地传递给experimental_extendTheme会导致以下错误:

MUI: `vars` is a private field used for CSS variables support. Please use another name.

预期行为

不会产生错误。具有匹配的createTheme功能。

上下文

按照第二种示例中描述的方式“组合”主题对象(但使用新的extendTheme实验性功能),将调用链接在一起

你的环境

我刚刚将代码沙箱文件复制到我的机器上以获取这些规格,不确定这是否重要。在我的机器上运行时仍然出现错误,而不是在codesandbox上。
系统:
操作系统:macOS 14.5
二进制文件:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
pnpm: 8.5.0 - /usr/local/bin/pnpm
浏览器:
Chrome: 125.0.6422.113
Edge: 未找到
Safari: 17.5
npm包:
@emotion/react: 11.11.4 => 11.11.4
@emotion/styled: 11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.19
@mui/material: 5.15.19 => 5.15.19
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14 => 5.15.14
@types/react: 18.2.38 => 18.2.38
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 4.4.4 => 4.4.4

a64a0gku

a64a0gku1#

为什么需要根据现有主题调用$x_{1m0n1}^{x}$?它不是设计成这样使用的。如果你需要多个主题,它们应该是独立的,或者你应该提取共享的标记。

$x_{1a0b}^{1x}$

oknwwptz

oknwwptz2#

它不是设计成这样使用的
难道不应该模仿 createTheme 吗?根据这里的文档:
当主题选项的值取决于另一个主题选项时,您应该分步构建主题。

let theme = createTheme({
  palette: {
    primary: {
      main: '#0052cc',
    },
    secondary: {
      main: '#edf2ff',
    },
  },
});

theme = createTheme(theme, {
  palette: {
    info: {
      main: theme.palette.secondary.main,
    },
  },
});

我试图从 createTheme 迁移到 extendTheme 的应用使用了分步构建主题的想法。我知道它仍然处于实验阶段,但文档似乎暗示 extendThemecreateTheme 可以相互1:1交换

ewm0tg9j

ewm0tg9j3#

在这里也遇到了同样的问题。我的用例是有一个函数,用于自动为各种主题配置区域设置。所以它接收一个语言和一个现有的主题对象,并将区域设置添加到其中。在createTheme上可以正常工作,但在尝试切换到新的extendTheme时会出现上述错误。

我目前的解决方法是使用CssVarsThemeOptions参数,但这并不是理想的解决方案,因为我们处理的并非所有主题都有为它们单独创建的选项对象(我们不管理进入此函数的所有主题的代码)。

相关问题