[joy-ui] Typography crashes if used with dangerouslySetInnerHtml

[MonstraG]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/p/sandbox/dazzling-visvesvaraya-y9tgkk

Steps:

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

Current behavior 😯

Uncaught Error: Can only set one of children or props.dangerouslySetInnerHTML.

Expected behavior 🤔

Renders text

Context 🔦

Render md -> html and set it as content of the typography.

I'm not sure how to apply typography's styles to text otherwise

Your environment 🌎

npx @mui/envinfo

System:
OS: Windows 11 10.0.22621
Binaries:
Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (119.0.2151.97)
npmPackages:
@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

[brijeshb42]

There are 3 undefined values as children when no children are provided resulting in this error. This does not affect material-ui because that only renders a single element.

[siriwatknp]

I don't see why you need to use dangerouslySetInnerHTML on the Typography. Why not just use a plain HTML tag?

<p dangerouslySetInnerHTML={{ __html: 'test' }} />

[MonstraG]

This is sort of what I ended up doing:

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

but that changes html markup (by adding wrapping div). In my case this is fine, but this might not be fine in all cases.

I want to use dangerouslySetInnerHTML on the Typography because:

1. I want to render pre-prepared html
2. I want styles of a typography

this the most direct way to solve this, especially coming from material-ui, where it just worked.

You could also just do something like this :#40221