Every time I apply sx to a component that is rendered as a string and then displayed using dangerouslySetInnerHtml, the styles within the sx prop do not work.
Here is an example showcasing the issue:
Codesandbox: https://codesandbox.io/p/sandbox/wonderful-engelbart-xv9j2l?file=%2Fsrc%2FDemo.js%3A26%2C1
import * as React from "react";
import { renderToString } from "react-dom/server";
import Box from "@mui/material/Box";
function BoxExample({ color }) {
return (
<Box
sx={{
bgcolor: color,
}}
>
<p>Content</p>
</Box>
);
}
export default function BasicButtons() {
const badHtml = renderToString(<BoxExample color={"#01FF00"} />);
return (
<>
<div dangerouslySetInnerHTML={{ __html: badHtml }} />
<BoxExample color={"#00B2FF"} />
{/* <BoxExample color={"#01FF00"} /> */}
</>
);
}
If you uncomment the third BoxExample and refresh, both green boxes will have their background color applied.