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>

所以我想为dynamic_class编写CSS，该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;
}

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

Answer 2

所以我想为dynamic_class编写css，该css用于两个不同的div中，并将具有不同的样式

因此将其放入scss中。

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

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

Answer 3

您需要编写 [ngClass] =“'dynamic_class'” 而不是[ngClass] =“ dynamic_class”并查看CSS

CSS

.container

HTML

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

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

我应该如何给课堂赋予动态风格？

3 个答案: