Is there a way to render a component and then apply additional rendering using useEffects in React?
The issue I am facing is that when I have a component with a specific theme, each useEffect call ends up overriding the style of the original component with its own theme.
I am using React 17.0.2 and material-ui 4.12.4 for this scenario. Below is the relevant code snippet:
import React from "react";
import ReactDOM from "react-dom";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import orange from "@material-ui/core/colors/orange";
import green from "@material-ui/core/colors/green";
import Checkbox from "@material-ui/core/Checkbox";
import Person from "@material-ui/icons/Person";
const greenTheme = createTheme({
palette: {
secondary: {
main: green[500]
}
}
});
const orangeTheme = createTheme({
palette: {
secondary: {
main: orange[500]
}
}
});
function App() {
React.useEffect(() => {
const div = document.createElement("div");
div.style.backgroundColor = "#ccc";
ReactDOM.render(
<ThemeProvider theme={greenTheme}>
<CssBaseline />
<div>
<Checkbox defaultChecked />
<Person color="secondary" />
</div>
</ThemeProvider>
, div
);
document.getElementById("root").append(div);
});
React.useEffect(() => {
const div = document.createElement("div");
div.style.backgroundColor = "#ccc";
ReactDOM.render(
<ThemeProvider theme={orangeTheme}>
<CssBaseline />
<div>
<Checkbox defaultChecked />
<Person color="secondary" />
</div>
</ThemeProvider>
, div
);
document.getElementById("root").append(div);
});
return (
<ThemeProvider theme={greenTheme}>
<CssBaseline />
<Checkbox defaultChecked />
<Person color="secondary" />
<div>
The color of above icon should be green but is getting overriden
</div>
</ThemeProvider>
);
}
export default App;