如何在Angular组件CSS中自定义类并继承Material CSS类进行样式重写

嗨，我来帮你搞定这个样式隔离的问题！你现在的困扰是直接修改全局Material样式导致所有同类元素受影响，想要只针对特定元素调整样式，同时不干扰全局，下面是具体实现步骤：

步骤1：恢复全局Material样式（如果之前修改过） #

首先把你之前在组件CSS里写的全局修改代码删掉，避免影响所有同类元素：

/* 删掉这段全局修改代码 */
.fixed-plugin .dropdown-menu { left: -503px !important; width: 500px; }

步骤2：创建自定义类并编写目标样式 #

在你的组件CSS文件中，编写带自定义类的组合选择器，这样只有添加了该自定义类的元素才会应用修改后的样式：

/* 仅针对添加了custom-fixed-dropdown类的下拉菜单生效 */
.fixed-plugin .dropdown-menu.custom-fixed-dropdown {
  /* 继承原Material样式的基础上，重写你需要修改的属性 */
  left: -503px !important; /* 保留你需要的定位值 */
  width: 500px; /* 这里可以改成你想要的任意宽度，比如600px */
  /* 还可以添加其他自定义样式，比如背景色、内边距等 */
}

原理说明：这个选择器的优先级比原全局的.fixed-plugin .dropdown-menu更高（多了一个类选择器），所以会覆盖原样式中对应的属性，而其他没有添加自定义类的元素依然使用Material的默认样式。

步骤3：在目标元素上应用自定义类 #

打开组件的模板文件，找到需要修改样式的.dropdown-menu元素，给它加上你创建的自定义类custom-fixed-dropdown：

<div class="fixed-plugin">
  <!-- 只有这个下拉菜单会应用自定义样式 -->
  <div class="dropdown-menu custom-fixed-dropdown">
    <!-- 你的下拉菜单内容 -->
  </div>
</div>

额外注意点 #

• 因为Angular组件CSS默认是样式隔离的，所以你写的这段自定义样式只会作用在当前组件内的元素，不会影响其他组件中的.fixed-plugin .dropdown-menu元素。
• 如果你的.fixed-plugin元素来自父组件或全局，也不用担心，Angular的组件样式依然可以通过组合选择器定位到它内部的子元素。

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