Migrate MUI theme and styling system to v7

[SAUMILDHANKAR]

This issue written with ChatGPT models' help

Overview

We want to migrate the MUI theme and styling system to v7 so styling behavior is standardized, maintainable, and compatible with the latest MUI ecosystem across the entire application.

Details

⚠️ Important workflow note:
This work should be done on a dedicated feature branch (e.g. feature/mui-v7-upgrade) and must not be merged directly into develop or main until all related UI refactor and validation issues in the epic are complete.

This issue is a cross-cutting migration effort that affects nearly every folder and component using MUI throughout the application. The current theme and styling system may contain centralized theme configuration, component overrides, typography configuration, spacing rules, breakpoint definitions, CSS overrides, and legacy styling approaches that may not be fully compatible with MUI v7.

Since the project is upgrading MUI incrementally folder-by-folder, the shared theme and styling system should be migrated separately to reduce duplication, styling inconsistencies, and repeated refactor work across feature folders.

This work should focus on identifying and refactoring all theme-related and styling-related MUI usage so the application is fully compatible with MUI v7 and newer styling patterns.

This migration may require:

• Migrating theme configuration files to MUI v7-compatible APIs
• Reviewing and updating palette configuration behavior
• Reviewing and updating typography configuration and variant mappings
• Reviewing spacing, breakpoints, responsive behavior, and layout consistency
• Refactoring or removing deprecated styling approaches such as makeStyles and withStyles if present
• Standardizing usage of sx, styled, and modern MUI styling patterns
• Reviewing component override structure and compatibility with newer MUI theme APIs
• Verifying that custom overrides continue to apply correctly to MUI components
• Reviewing CSS specificity and style injection order issues introduced by newer MUI versions
• Reviewing responsive breakpoints and mobile behavior throughout the application
• Verifying typography consistency across pages and reusable components
• Reviewing interactions between MUI theme styling and legacy CSS/SCSS files
• Ensuring global CSS does not unintentionally override MUI styling behavior
• Performing manual QA to identify visual regressions, spacing inconsistencies, layout shifts, or typography issues
• Please consider adding critical tests and validations (optional)
• Optional refactoring is allowed if it improves maintainability or compatibility during migration
• Note: As of May 14, 2026, typescript feature branch isn't merged yet, so some of the jsx/js files written in this issue could have become tsx by the time developer is assigned so please keep that in mind.

Known files and folders in scope include (non-exhaustive):

• client/src/theme/index.jsx
• client/src/theme/palette.tsx
• client/src/theme/typography.tsx
• client/src/theme/breakpoints.js
• client/src/theme/overrides/
• client/src/theme/overrides/Button.js
• client/src/theme/overrides/Checkbox.js
• client/src/theme/overrides/Chip.js
• client/src/theme/overrides/CssBaseline.js
• client/src/theme/overrides/Link.js
• client/src/theme/overrides/Radio.js
• client/src/theme/overrides/Select.js
• client/src/theme/overrides/SvgIcon.js
• client/src/theme/overrides/Tab.js
• client/src/theme/overrides/Tabs.js
• client/src/theme/overrides/TextField.js
• client/src/theme/overrides/Tooltip.js
• client/src/theme/overrides/Typography.js
• client/src/theme/overrides/index.js
• client/src/styles/root.css

Particular attention should be given to:

• Theme override compatibility with MUI v7
• Typography variant behavior and responsive scaling
• Styling migration from legacy patterns to sx and styled
• Breakpoint consistency and responsive layout behavior
• CSS/SCSS rules overriding MUI-generated styles
• Global styles affecting MUI components
• CssBaseline overrides and global reset behavior
• Any remaining usage of deprecated styling APIs

The root.css file may also require review because it contains global styling behavior that can interact with MUI styling and layout systems, including:

• Global font definitions
• Body typography defaults
• Mobile media queries
• Mapbox popup and control styling
• Global overflow and rendering behavior

Because MUI v7 introduces breaking changes in theming, styling behavior, component overrides, and legacy styling support, developers should review the migration documentation while working through this migration effort.

Action Items

[PLEASE ADD ACTION ITEMS (Dev lead/developer will add)]

Resources

• Parent issue: [MUI upgrade parent issue (#2626)](https://github.com/hackforla/food-oasis/issues/2626?utm_source=chatgpt.com)
• https://mui.com/material-ui/migration/upgrade-to-v7/
• https://mui.com/material-ui/migration/v7/migrating-from-deprecated-apis/?_gl=1*ty2234*_up*MQ..*_ga*MTY1MDc4NDY3MC4xNzc5MDQ3NTk0*_ga_5NXDQLC2ZK*czE3NzkwNDc1OTMkbzEkZzAkdDE3NzkwNDc1OTMkajYwJGwwJGgw
• [MUI migration overview (v5 → newer versions)](https://mui.com/material-ui/migration/?utm_source=chatgpt.com)
• [MUI breaking changes and migration guides](https://mui.com/material-ui/migration/upgrade-to-v6/?utm_source=chatgpt.com)
• [MUI customization and theming documentation](https://mui.com/material-ui/customization/theming/?utm_source=chatgpt.com)
• [MUI sx prop documentation](https://mui.com/system/getting-started/the-sx-prop/?utm_source=chatgpt.com)
• [MUI styled utility documentation](https://mui.com/system/styled/?utm_source=chatgpt.com)
• [MUI style changes and interoperability documentation](https://mui.com/material-ui/integrations/interoperability/?utm_source=chatgpt.com)
• [theme folder](https://github.com/hackforla/food-oasis/tree/develop/client/src/theme?utm_source=chatgpt.com)
• [theme overrides folder](https://github.com/hackforla/food-oasis/tree/develop/client/src/theme/overrides?utm_source=chatgpt.com)
• [root.css](https://github.com/hackforla/food-oasis/blob/develop/client/src/styles/root.css?utm_source=chatgpt.com)