我应该如何为课堂赋予动态风格？答案

【问题标题】：How should I give dynamic styles to class?我应该如何为课堂赋予动态风格？
【发布时间】：2019-04-12 09:28:29
【问题描述】：

我正在做一个有角度的项目。我在哪里需要将动态类设置为 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>

所以我想为 dynamic_class 编写 CSS，它用于两个不同的 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;
}

【问题讨论】：

标签： html angular sass

【解决方案1】：

我不确定我是否理解正确。但是你可以限制父元素应用哪个类：

.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;
}

【讨论】：

dynamic_class 似乎是字符串类型的属性，而不是字符串本身（这就是为什么它被称为“动态”；））...所以我认为这不是@AviatorX 想要的。我同意你的观点，这个问题不是很清楚。
我对 css 或 scss 了解不多，但是 header-style 是 dynamic_class 的父级吗？

【解决方案2】：

所以我想为 dynamic_class 编写 css，它用于两个不同的 div 并且会有不同的样式

所以把它放在 scss 中。

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

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

【讨论】：

【解决方案3】：

你需要写 [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>

【讨论】：