[system] Fix theme mutation when using responsive typography shorthand in sx by tomups · Pull Request #48266 · mui/material-ui (original) (raw)

Summary

Fixes #48265

setThemeValue in styleFunctionSx.js assigns css[mediaKey] = finalValue where finalValue is a theme typography variant object returned by reference from getPath. This replaces the breakpoint's CSS accumulator with the live theme object, so subsequent responsive sx keys targeting the same breakpoint write their CSS properties directly into theme.typography.<variant>.

For example, after rendering <Box sx={{ typography: { md: 'h4' }, width: { md: '80%' } }}>, theme.typography.h4 permanently contains width: '80%', affecting every component using that variant.

The non-responsive path already uses merge(css, finalValue) which copies properties without creating a reference. This PR makes the responsive path consistent by using merge(css[mediaKey], finalValue) instead of the direct assignment.

Regression from #44254.