static getDerivedStateFromError() only

both static getDerivedStateFromError() and componentDidCatch()

static getDerivedStateFromError() or componentDidCatch()

componentDidCatch() only

Error: Invalid hook call... - because we cannot call custom hooks from custom hooks

Error: Invalid hook call... - because you can only call hooks at the top level

The code is ok

Infinite loop

<Button variant="outlined" sx={{ color="red"}}>

Hello Marathon

</Button>

<Button variant="outlined" sx={ color:"red"}>

Hello Marathon

</Button>

<Button variant="outlined" sx={ color:red}>

Hello Marathon

</Button>

<Button variant="outlined" sx={{ color: red }}>

Hello Marathon

</Button>

<Button variant="outlined" sx={{ color:"red"}}>

Hello Marathon

</Button>

root

styleOverrides

rootStyle

variant

style

Global theme variation

One-off customization

Reusable component

Global CSS override