Open MonstraG opened 1 year ago
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.
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' }} />
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:
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 :https://github.com/mui/material-ui/pull/40221
Duplicates
Latest version
Steps to reproduce πΉ
Link to live example: https://codesandbox.io/p/sandbox/dazzling-visvesvaraya-y9tgkk
Steps:
1.
Current behavior π―
Uncaught Error: Can only set one of
children
orprops.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 π
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.2npx @mui/envinfo