咨询：如何在Angular 6的Material应用弹窗中显示无样式标准HTML元素

嘿，这个场景我太熟悉了——Angular Material的全局样式确实会“悄悄”覆盖原生表单元素的默认样式，哪怕你没用到Material的组件指令。给你几个实用的解决思路，亲测有效：

方法1：用all: revert重置元素到浏览器默认样式 #

这是最简洁的方案，利用CSS的all: revert属性直接把元素样式恢复为浏览器的默认值，而不是完全清除样式。你只需要在对话框组件的CSS文件里，针对需要原生样式的元素添加规则：

/* 对话框组件的styles.css */
:host ::ng-deep input[type="checkbox"],
:host ::ng-deep button,
:host ::ng-deep input[type="text"] {
  /* 一键恢复到浏览器原生样式 */
  all: revert;
  /* 针对个别属性微调（可选，比如确保复选框的外观正确） */
  appearance: auto;
}

• :host 确保样式只作用于当前对话框组件内部
• ::ng-deep 穿透Angular的视图封装，让样式能作用到对话框里的原生元素
• all: revert 是关键，它会忽略Material的全局样式，回到浏览器对该元素的默认渲染

方法2：创建隔离的无样式容器 #

如果只想让对话框里某一部分的元素是原生样式，可以定义一个容器类，把目标元素包裹进去，只对这个容器内的元素重置样式：

/* 对话框组件的styles.css */
.native-element-container * {
  all: revert;
}

然后在模板里使用这个容器：

<!-- 对话框模板 -->
<h2 mat-dialog-title>原生元素测试</h2>
<mat-dialog-content>
  <!-- 这个容器里的元素都是原生样式 -->
  <div class="native-element-container">
    <input type="checkbox" id="agree">
    <label for="agree">我同意</label>
    <br>
    <input type="text" placeholder="输入内容">
    <br>
    <button>原生按钮</button>
  </div>
  <!-- 这里的元素还是Material样式 -->
  <mat-checkbox>Material复选框</mat-checkbox>
</mat-dialog-content>

这种方式更灵活，能轻松区分原生和Material风格的元素区域。

方法3：调整组件的视图封装策略 #

如果你的对话框是独立组件，可以关闭它的视图封装，然后给组件加一个唯一的类前缀，专门写原生元素的样式（避免影响全局）：

// 对话框组件的.ts文件
import { Component, ViewEncapsulation } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-native-dialog',
  templateUrl: './native-dialog.component.html',
  styleUrls: ['./native-dialog.component.css'],
  // 关闭视图封装，让样式能直接作用到内部元素
  encapsulation: ViewEncapsulation.None
})
export class NativeDialogComponent {
  constructor(public dialogRef: MatDialogRef<NativeDialogComponent>) {}
}

然后在CSS里用组件的选择器限定样式范围：

/* 对话框组件的styles.css */
app-native-dialog input[type="checkbox"],
app-native-dialog button,
app-native-dialog input[type="text"] {
  all: revert;
}

这个方法适合样式比较复杂的场景，但要注意关闭视图封装后样式可能会全局污染，所以一定要用组件选择器前缀做隔离。

额外注意事项 #

• all: revert 支持绝大多数现代浏览器（Chrome、Firefox、Edge、Safari 14.1+），如果需要兼容旧版浏览器，可以手动重置关键属性（比如border: initial; background: initial; padding: 2px 6px;等）
• 测试时注意不同浏览器的原生样式略有差异，这是正常现象，毕竟原生元素的默认样式本身就会因浏览器不同而变化

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