fix(apollo-react): use MUI CSS classes for color variants [MST-14544] - #1110
fix(apollo-react): use MUI CSS classes for color variants [MST-14544]#1110alextran1 wants to merge 1 commit into
Conversation
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
🟡 Changes recommended
The new filled variant text colors don’t propagate to icons/delete icons due to a conflicting root override, causing incorrect/low-contrast icon coloring on colored chips.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR updates the apollo-react MUI theme override for Chip to style semantic color variants using MUI’s own Chip color/variant CSS classes, improving consistency for primary/secondary/success/info/warning/error filled chips.
Changes:
- Switch variant targeting from custom classes (e.g.
.warning,.success) to MUI’sMuiChip-filled+MuiChip-colorXclass combinations. - Add explicit filled styling for
primaryandsecondarychips (including hover states). - Keep outlined colored behavior delegated to MUI’s built-in outlined styling (border/text with transparent fill).
File summaries
| File | Description |
|---|---|
| packages/apollo-react/src/material/theme/overrides/MuiChip.ts | Updates Chip theme overrides to apply filled color-variant styling via MUI Chip CSS classes. |
Review details
- Files reviewed: 1/1 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| '&.MuiChip-filled.MuiChip-colorPrimary': { | ||
| color: palette.semantic.colorForegroundOnAccent, | ||
| background: palette.semantic.colorPrimary, | ||
| fontWeight: token.FontFamily.FontWeightSemibold, | ||
| '&:hover': { |
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Sep 01, 2026, 03:45:36 PM |
Description
Update CSS styles to use MUI Chip's CSS classes to display the different color variants:
Demo
Before:

After:
