bug(mat-dialog): default Dialog backdrop color is hardcoded black 32% instead of using mat-sys-scrim

未关闭

#33,578 创建于 2026年7月23日 1 条评论 0 个 reaction 已指派 0 人在 GitHub 查看

还没有人认领这个 Issue。

评估

难度: 3/5
预计耗时: 1-2 天
新手友好度: 68/100

Issue 类型: 缺陷
描述清晰度: 基本清楚
活跃度: 冷清
技术栈: angular, scss, typescript
领域: frontend

调研方向

从 src/cdk/overlay/_index.scss 中引用的 backdrop 样式开始，检查 Angular Material dialog 概览的复现。跟踪 dialog overlay 如何接收其 scrim 样式，并确认现有的 mat-sys-scrim token 是否在那里可用。完成标准是默认 scrim 使用 mat-sys-scrim，同时保留 dialog 在浅色和深色主题中的预期行为。

由索引模型根据 Issue 内容生成。

描述

area: cdk/overlay gemini-triaged P3

Description

Not sure if this is a bug or intentional, please advise

The default Angular Material behavior when opening a Dialog is to add a 32% opacity black scrim for the overlay. This is not in any way customizable and instead is hardcoded in the Angular CDK overlay implementation: https://github.com/angular/components/blob/501d6744b377e1ef7d1cf7e86edcc0eedbf755e7/src/cdk/overlay/_index.scss#L9

Since there is an existing mat-sys-scrim token for this exact purpose I recommend it be used for customization purposes and for the ability to account for light and dark themes.

Reproduction

https://material.angular.dev/components/dialog/overview

Expected Behavior

mat-sys-scrim token is used for scrims

Actual Behavior

Hardcoded 32% opacity black value is used for the scrim

Environment

Angular: v22
CDK/Material: v22
Browser(s): any
Operating System (e.g. Windows, macOS, Ubuntu): any

主要语言: TypeScript
星标: 25k
派生: 6.8k
平均合并: 1 天 1 小时
30 天内合并 PR: 84

贡献指南

打开贡献指南

从这里开始

先读完整个 Issue，再读项目的贡献指南。
在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
Fork 仓库，在一个分支上完成修改。
提交 Pull Request，并在描述里引用这个 Issue 编号。

angular/components 的其他 Issue

docs-bug(tree): Test classes and interfaces do not render 未关闭

area: material/tree docs gemini-triaged needs triage

难度 2/5 1-3 小时新手友好度 68/100

angular/components#33832 · 2026年9月17日创建
bug(mat-date-picker): month shown twice in date picker 未关闭

area: material/datepicker gemini-triaged P4

难度 2/5 1-3 小时新手友好度 72/100

angular/components#33763 · 2 条评论 · 3 个 reaction · 2026年9月2日创建
Bug in table.scss footer cell height: unset instead of footer row height unset 未关闭

area: material/table gemini-triaged P4

难度 1/5 1 小时以内新手友好度 88/100

angular/components#33709 · 1 条评论 · 2026年8月21日创建
docs-bug(Table): Add example with `rowspan` 未关闭

area: material/table docs gemini-triaged P4

难度 2/5 1-3 小时新手友好度 72/100

angular/components#33455 · 2026年6月27日创建
bug(date-adapter): Misleading JSDoc for createDate returns type 未关闭

area: material/core gemini-triaged P3

难度 1/5 1 小时以内新手友好度 78/100

angular/components#33059 · 2 条评论 · 2026年4月9日创建

查看 angular/components 的全部 Issue

相似的 Issue

Tapping "Use video" more than once submits the verification twice 未关闭

难度 2/5 1-3 小时新手友好度 84/100

bcgov/bc-wallet-mobile#4761 · 1 条评论 · 2026年9月24日创建
fix(pg-meta): schemas.update and schemas.remove DO blocks fail when a name contains "$$" 未关闭

external-issue to-triage

难度 2/5 1-3 小时新手友好度 88/100

supabase/supabase#50882 · 2026年9月24日创建
Azure Sandboxes: Small and ExtraSmall tiers always fail to deploy (disk request exceeds tier maximum) 未关闭

area-deployment area-integrations triage:bot-seen

难度 2/5 半天新手友好度 86/100

microsoft/aspire#20459 · 1 条评论 · 2026年9月24日创建
Mobile builds drop the telemetry and crash-reporting keys, so opting in sends nothing 未关闭

难度 2/5 1-3 小时新手友好度 82/100

0xMiden/wallet#1118 · 2026年9月24日创建
[P3] Handle clipboard failures and announce copy status accessibly 未关闭

refactor

难度 2/5 1-3 小时新手友好度 84/100

nteract/semiotic#1534 · 2026年9月24日创建

更多 TypeScript Issue