代码之家 › 专栏 › 技术社区 › kashpatel

当组件scss文件导入到样式scss文件时,角度组件的样式视图封装不起作用

angular-material-theming angular6 angular-material sass angular

1

kashpatel · 技术社区 · 6 年前

假设在角分量的内部有一个SCSS混合物我的.component.scss文件。

现在我在Angular应用程序的全局样式.scss因为我想把一些数据传给那个混音器。

例如:

<pre>
 @mixin my-component-theming($theme) {
     // Extract whichever individual palettes you need from the theme.
     $warn-palette: map-get($theme, warn);

     $warn: mat-color($primary-palette);

     .error-message {
        color: $warn !important;
      }
   }
</pre>

我的-组件.ts

<pre>

 @Component({
   selector: 'my-component',
   templateUrl: './my-component.html',
   styleUrls: ['./my-component.scss']
})

</pre>

角度应用程序样式.scss. (这将导入角度.json)

<pre>
    @import '~@angular/material/theming';
    @import 'my-component.scss';

    // just imagine that $app-theme is already defined here. 
    // Not including unnecessary code to keep example simple.

    @include my-component-theming($app-theme)
</pre>

Angular应该封装了“error message”css类,它的可见性应该仅限于我的组件。在这种情况下如何保持封装工作?

附言: 我只是想做到这一点: https://material.angular.io/guide/theming#theming-only-certain-components 但这个问题似乎更为笼统。

提前谢谢。让我知道如果进一步的澄清或代码是必要的。

1 回复 | 直到 6 年前

1

2

G. Tranter 6 年前

主题化和样式封装是两件不同的事情。Angular将只封装组件样式表中的样式代码;它不封装在那里定义的任何mixin,因为必须调用mixin才能应用。你在哪里定义mixin与mixin在哪里应用无关-这取决于你。整个应用程序都可以访问您的错误类,因为您在主样式表中调用了('包含')它。

@mixin my-component-theming($theme) {
  // Extract whichever individual palettes you need from the theme.
  $warn-palette: map-get($theme, warn);

  $warn: mat-color($primary-palette);

  my-component.error-message {
    color: $warn !important;
  }
}

这仍然定义了应用程序范围内的样式,但它只会影响组件。

话说回来,你可以尝试封装组件主题。您需要在组件的样式表中访问全局定义的主题,还可能需要将角度材质主题化实用程序导入到组件样式表中。我不确定这是否有效,我认为如果你对很多组件这样做的话,可能会在你的应用程序中增加很多样式重复。