angular 中的一個組件中的樣式優於另一個組件中的樣式

Question

我有一個帶有卡片容器的 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
        }`

Answer 1

更具體地為 A 組件編寫 Css。 給父 div 一個 class.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';
 }