material-ui 如果在使用`dangerouslySetInnerHtml`时使用`joy-ui`的排版系统，可能会导致崩溃,

sc4hvdpw 于 6个月前发布在其他

关注(0)|答案(3)|浏览(54)

重复问题

我已搜索现有的问题

重现步骤 🕹

链接到实时示例：
https://codesandbox.io/p/sandbox/dazzling-visvesvaraya-y9tgkk
步骤：

export default function TypographyBasics() {
  return <Typography dangerouslySetInnerHTML={{ __html: "test" }} />;
}

当前行为 😯

未捕获的错误：只能设置 children 或 props.dangerouslySetInnerHTML 中的一个。

预期行为 🤔

渲染文本

上下文 🔦

将 md 渲染为 html 并将其设置为排版文字的内容。
我不确定如何将排版文字的样式应用于文本，否则

您的环境 🌎

npx @mui/envinfo
系统：
OS: Windows 11 10.0.22621
二进制文件：
Node: 20.9.0 - C:Program Files
odejs
ode.EXE
Yarn: 1.22.19 - ~AppData\Roaming
pm\yarn.CMD
npm: 10.1.0 - C:\Program Files
odejs
pm.CMD
浏览器：
Chrome: 未找到
Edge: Chromium (119.0.2151.97)
npm包：
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.25 => 5.0.0-beta.25
@mui/icons-material: ^5.14.19 => 5.14.19
@mui/joy: 5.0.0-beta.16 => 5.0.0-beta.16
@types/react: ^18.2.39 => 18.2.39
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.3.2 => 5.3.2

material-ui

来源：https://github.com/mui/material-ui/issues/40058

3条答案

按热度按时间

fxnxkyjh1#

当没有提供子元素时，存在3个值为undefined的子元素，从而导致此错误。这不会影响material-ui,因为它只渲染一个元素。

赞(0）回复(0）举报 6个月前

gz5pxeao2#

解：因为$x_{1a0b1} x_{1m0n1} x_{1m1n1} x_{1a0b1}$是HTML中的格式控制字符，

所以在$x_{1m1n1} x_{1a0b1}$中不能直接输入。

赞(0）回复(0）举报 6个月前

s6fujrry3#

这是我最终采用的方法：

<Typography component="div">
    <article dangerouslySetInnerHTML={{ __html: 'test' }} />
</Typography>

但这会改变HTML标记(通过添加 Package div)。在我的情况下，这是可以的，但在所有情况下可能都不行。
我想在 Typography 上使用 dangerouslySetInnerHTML ,因为：

我想呈现预先准备好的HTML
我想使用排版样式
这是解决这个问题的最直接方法，尤其是来自material-ui的情况，它可以直接工作。
你也可以做类似这样的事情：#40221

赞(0）回复(0）举报 6个月前

我来回答

material-ui 如果在使用`dangerouslySetInnerHtml`时使用`joy-ui`的排版系统，可能会导致崩溃,

重复问题

最新版本

重现步骤 🕹

当前行为 😯

预期行为 🤔

上下文 🔦

您的环境 🌎

3条答案

相关问题

热门标签

最新问答