在NextJS中使用react-md-editor设置深色主题时遇到问题

Question

我已按照为 NextJS 设置 React-md-editor 的说明进行操作，该说明已使文本编辑器出现在应用程序中，但根据 https://www 上的说明，我无法让文本编辑器代表深色主题.npmjs.com/package/next-md-editor

这里是一个给定示例的 codesandbox，说明文档如何表示主题：浅色和深色主题的 codesandbox

无论我是否有一个带有 data-color-mode="dark" 道具的 div、带有该道具的某种容器，或者根本没有容器，主题对我来说总是浅色的。

是否有某种我忽略的压倒一切的样式？ 我在整个应用程序中使用 Material UI 组件，并且在添加此文本编辑器之前，我已经在 _app.js 文件中拥有主题提供程序。（这可能是根本问题吗？如果是，怎么办？）我已经创建了单独组件中的codesandbox 中的示例的几乎完全相同的工作副本，无法在我的应用程序中更改主题。

第 24 行和第 27 行是深色和浅色主题的“切换”。 对我来说唯一真正有意义的部分是第 21-32 行。

我知道向随机 div 添加随机 prop 并不会像这里所表示的那样神奇地添加样式更改，但否则到底发生了什么？据我所知，这就是文档告诉我要做的所有事情。

这两个渲染都是浅色主题。

这是包含文本编辑器的组件在父级中的片段（如果此上下文有帮助）。

请帮忙。

Answer 1

文件说；

🌒 Support dark-mode/night-mode @v3.11.0+.

您可能正在使用

@uiw/react-md-editor

下的

<3.11.0

软件包。如果您按照文档中的说明将版本升级到所需版本以上，则您的问题应该得到解决。

更新版本后；

添加你的父 div

data-color-mode={"your preferred dark or light mode"}

，你就会得到解决方案。

示例：

<div data-color-mode="light">
   <h3>Light</h3>
   <MDEditor height={200} value={value} onChange={setValue} />
</div>