Как я должен дать динамические стили для класса?

Question

Я делаю угловой проект.Где мне нужно, чтобы динамический класс был настроен на проблему с элементом HTML, я не могу правильно установить стили для динамического класса.Я попробовал следующие ресурсы, чтобы исправить мой CSS

https://css -tricks.com / the-sass-ampersand /

https://dev.to/sarah_chima/nesting-in-sass-bme

<div fxLayout="row" class="header-style" 
[ngClass]="dynamic_class" fxFill>
     <div fxLayout="row" fxLayoutAlign="start center">
          <mat-icon svgIcon="{{ icon_path }}" aria-label=""></mat-icon>
     </div>
</div>

<!-- following is different div in same html -->

<div fxLayout="row" class="footer-style" 
[ngClass]="dynamic_class" fxFill>
      <div fxLayout="row" fxLayoutAlign="start center">
            <mat-icon svgIcon="{{ icon_path }}" aria-label=""></mat-icon>
      </div>
</div>

поэтому я хочу написать CSS для dynamic_class, который используется в двух разных div и будет иметь разные стили, как показано ниже

dynamic_class {    //this is for header i.e. 1st div
   padding: 12px;
}

dynamic_class {    //this is for footer i.e. 2nd div
   padding: 12px 8px;
}

Answer 1

поэтому я хочу написать css для динамического класса, который используется в двух разных div и будет иметь разные стили

Так что поместите это в scss.

.header-style .dynamic_class {   
   padding: 12px;
}

.footer-style .dynamic_class { 
   padding: 12px 8px;
}

Answer 2

Вам нужно написать [ngClass] = "'dynamic_class'" вместо [ngClass] = "dynamic_class", а также взглянуть на css

CSS

.header-style.dynamic_class {
padding: 12px;
}

.footer-style.dynamic_class {
padding: 12px 8px;
}

HTML

<div fxLayout="row" class="header-style" 
 [ngClass]="'dynamic_class'" fxFill>
        <div fxLayout="row" fxLayoutAlign="start center">
               dsfaSfdf
        </div>
</div>

<!-- following is different div in same html -->


<div fxLayout="row" class="footer-style"
 [ngClass]="'dynamic_class'" fxFill>
        <div fxLayout="row" fxLayoutAlign="start center">
                dsfsfsd
        </div>
</div>

Answer 3

Я не уверен, правильно ли я понимаю. Но вы можете ограничить, какой класс применяется родительским элементом:

.header-style dynamic_class {    //this is for header i.e. 1st div
padding: 12px;
}

.footer-style dynamic_class {    //this is for footer i.e. 2nd div
padding: 12px 8px;
}