一个组件中的样式优于另一个组件中的骑乘样式答案

【问题标题】：Style in one component is over riding style in another component in angular一个组件中的样式优于另一个组件中的骑乘样式
【发布时间】：2020-08-30 13:49:36
【问题描述】：

我有一个带有卡片容器的 X 组件。当我单击卡片时，我被带到另一个组件，该组件具有嵌套在容器中的 A、B、C 组件。组件 A 也有一个卡片容器，但具有不同的 css 样式。当我单击返回并来到 X 组件时，卡片容器的 css 被替换为 A 组件的 CSS。

我在 A 组件中使用 Viewencapsulation.none，因为我必须覆盖一些材质 CSS。我的要求是，当我回到 X 组件时，A 的 CSS 不应该覆盖它。

这是A组件中的CSS

    `.card{
     max-width: 270px !important;
     margin: auto;
     transition: all ease 0.3s;
     box-shadow: 0 8px 40px -12px rgba(0,0,0,0.3);
     background:'#7E7E7E'
     }`

这是 X 组件中的 CSS

    `  .card {
          display:block;
         /* text-align: center !important; */
         perspective: 150rem;
-        moz-perspective: 150rem;
         position: relative;
         height: 30rem;
         /* padding: calc((100% - 2 * 6rem) / 5); */
         padding-left: 3vw;
         padding-right: 3vw;
        }`

由于 A 组件中存在最大宽度，因此我的 X 组件也占用了它并使其看起来很尴尬，并且由于我的样式，我无法从 A 中删除该最大宽度。

X 组件中的装饰器

   `@Component({
    selector: 'app-X',
    templateUrl: './X.component.html',
    styleUrls: ['./X.component.css'],
    encapsulation: ViewEncapsulation.None
    })

没有 ViewEncapsulation.None 它按预期工作，但我需要封装为 none 以在材料中覆盖它

        `  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
          border-color:#fff !important;
         }

        .mat-radio-button.mat-accent .mat-radio-inner-circle{
           color:rgb(66, 134, 244) !important;
         background-color:#fff !important
        }`

【问题讨论】：

更具体地为 A 组件编写 css，例如 - 为 A 提供类 .a-component，您可以编写 .a-component .card { ...... }

标签： css angular angular-material

【解决方案1】：

更具体地为 A 组件编写 Css。给父 div 一个类 .a-component。以这种方式设计 A 组件：

如果你使用的是 sass

.a-component {
     .card{
       max-width: 270px !important;
       margin: auto;
       transition: all ease 0.3s;
       box-shadow: 0 8px 40px -12px rgba(0,0,0,0.3);
       background:'#7E7E7E'
     }`
 }

如果你使用 css

.a-component .card{
       max-width: 270px !important;
       margin: auto;
       transition: all ease 0.3s;
       box-shadow: 0 8px 40px -12px rgba(0,0,0,0.3);
       background:'#7E7E7E';
 }

【讨论】：