Angular Material弹窗内mat-form-field-outline自定义样式仅右侧圆角生效问题

• 基于Angular Material开发的项目，在全局custom-theme.scss中覆写mat-form-field-appearance-outline的样式规则，为表单外轮廓设置15px圆角、半透明灰色背景。
• 常规业务页面内自定义样式可完全生效，但MatDialog弹窗内的同一类表单仅右侧（end端）圆角正常渲染，左侧（start端）呈现直角效果。
• 异常仅在弹窗场景下出现，常规页面无同类问题。

• 通过浏览器DevTools检查弹窗内DOM节点，对应元素的border-radius规则已正确挂载应用，无样式未加载、优先级被覆盖到失效的情况。
• 已尝试调整组件的ViewEncapsulation枚举配置、在弹窗组件内单独编写同规则样式，均未解决异常。

////////////////////////// FORM FIELDS //////////////////////////
.mat-form-field-appearance-outline {
  .mat-form-field-infix {
    padding: 0.4rem 0 0.7rem 0;
    span {
      top: -1.2em;
    }
  }
  .mat-form-field-outline {
    background-color: rgba(187, 187, 187, 0.2) !important;
    border-radius: 15px !important;
    border: none !important;
    .mat-form-field-outline-start {
      border-radius: 15px 0 0 15px !important;
    }
    .mat-form-field-outline-end {
      border-radius: 0 15px 15px 0 !important;
    }
  }
}

Angular Material的outline形态表单的轮廓结构，由三个独立的矩形DOM块拼合组成：

• 左侧块.mat-form-field-outline-start：覆盖从容器左边缘到浮动标签左边界的区域，为浮动标签留出缺口
• 右侧块.mat-form-field-outline-end：覆盖从浮动标签右边界到容器右边缘的区域
• 缺口块.mat-form-field-outline-gap：覆盖浮动标签所在位置的底部边线

当MatDialog通过CDK浮层机制挂载到body节点下时，会动态注入弹窗专属的样式规则，压缩.mat-form-field-outline-start块的默认宽度。该块的实际渲染宽度小于设置的15px圆角半径时，圆角没有足够的空间完成渲染，视觉上就会呈现为左侧直角。而右侧块没有被弹窗样式压缩宽度，因此15px圆角可以正常渲染。
原有写法把背景、圆角设置在.mat-form-field-outline容器层级，本身也存在块级元素的渲染遮挡问题，容易在浮层场景下出现显示偏差。

1. 调整样式的作用层级，将背景色、圆角规则直接作用在三个独立的轮廓子块上，避免容器层级的样式被浮层动态规则覆盖。
2. 给左侧块增加最小宽度补偿，保证有足够空间渲染大尺寸圆角。
3. 针对MatDialog的浮层容器增加选择器前缀，提高弹窗场景下的样式优先级，避免被内置样式覆盖。

调整后的全局样式代码：

////////////////////////// FORM FIELDS //////////////////////////
.mat-form-field-appearance-outline {
  .mat-form-field-infix {
    padding: 0.4rem 0 0.7rem 0;
    span {
      top: -1.2em;
    }
  }
  .mat-form-field-outline {
    border: none !important;
    // 左侧轮廓块
    .mat-form-field-outline-start {
      min-width: 15px !important; // 保证圆角渲染的最小宽度
      background-color: rgba(187, 187, 187, 0.2) !important;
      border-radius: 15px 0 0 15px !important;
    }
    // 右侧轮廓块
    .mat-form-field-outline-end {
      background-color: rgba(187, 187, 187, 0.2) !important;
      border-radius: 0 15px 15px 0 !important;
    }
    // 标签缺口块
    .mat-form-field-outline-gap {
      background-color: rgba(187, 187, 187, 0.2) !important;
    }
  }
}

// 针对CDK浮层（MatDialog、Select等弹层场景）的增强样式，追加在全局样式文件末尾
.cdk-overlay-container .mat-form-field-appearance-outline .mat-form-field-outline {
  .mat-form-field-outline-start {
    min-width: 15px !important;
    background-color: rgba(187, 187, 187, 0.2) !important;
    border-radius: 15px 0 0 15px !important;
  }
  .mat-form-field-outline-end {
    background-color: rgba(187, 187, 187, 0.2) !important;
    border-radius: 0 15px 15px 0 !important;
  }
  .mat-form-field-outline-gap {
    background-color: rgba(187, 187, 187, 0.2) !important;
  }
}

内容的提问来源于stack exchange，提问作者Sandy Veliz