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

角度:无法设置路径样式

  •  0
  • Boris  · 技术社区  · 6 年前

    我创建了一个新项目,安装了字体:

    "@fortawesome/angular-fontawesome": "^0.4.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-brands-svg-icons": "^5.9.0",
    

    进口 FontAwesomeModule :

    imports: [
        ...,
        FontAwesomeModule
    ],
    

    并创建了一个简单的图标:

    faFacebook = faFacebook;
    
    <fa-icon [icon]="faFacebook"></fa-icon>
    

    图标已成功显示。现在我想设计一个 path 生成的图标的名称:

    path {
      fill: red;
    }
    

    但它不起作用。我的Chrome甚至没有在开发者工具中打印这个规则。

    我该怎么做 路径 ? 我必须准确地设计风格 路径 fa-icon (使用 fill: url(#gradient) ).

    1 回复  |  直到 6 年前
        1
  •  1
  •   Community CDub    5 年前

    Angular默认提供样式的封装(模拟)。这意味着每个组件都是独立的,同一页面中的两个组件之间不会有任何冲突。(例如,如果它们使用相同的类名)。

    https://angular.io/guide/component-styles

    根据官方文件:

    视图封装

    如前所述,组件CSS样式被封装到组件的视图中,不会影响应用程序的其余部分。

    要控制每个组件的封装方式,可以在组件元数据中设置视图封装模式。从以下模式中选择:

    • ShadowDom视图封装使用浏览器的本机shadow DOM实现(请参阅MDN站点上的shadow DOM)将shadow DOM附加到组件的宿主元素,然后将组件视图放入该shadow DOM中。组件的样式包含在阴影DOM中。

    • 本机视图封装使用了浏览器本机shadow DOM实现的一个现已弃用的版本——了解这些更改。

    • 模拟视图封装(默认)通过预处理(和重命名)CSS代码来模拟阴影DOM的行为,从而有效地将CSS范围限定到组件的视图。详情见附录1。

    • None表示Angular不进行视图封装。Angular将CSS添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到HTML中基本相同。

    要设置组件中包含的元素的样式(如果组件库本身未提供此功能),则有2个选项:

    1) 将你的风格添加到全球 styles.css

    在全局范围内定义的样式没有任何封装 风格。css .

    在组件中:

    <fa-icon class="my-global-icon" [icon]="faFacebook"></fa-icon>
    

    在你的 风格。css styles.scss :

    fa-icon.my-global-icon path {
      fill: red;
    }
    

    2) 禁用封装仿真

    默认情况下,封装在组件内部定义的样式上是活动的(模拟的)。 要禁用它,您应该设置 encapsulation = ViewEncapsulation.None

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ],
      encapsulation: ViewEncapsulation.None
    })
    export class AppComponent  {
    ...
    

    在这种情况下,您将能够设置包含在组件的直接子元素中的子元素的样式。但是要小心,你可能会遇到风格冲突的其他问题。你现在的工作就是管理它们。

    希望能有所帮助。

        2
  •  0
  •   Arun    6 年前

    通过传递[style]属性,可以直接更改图标的样式,如下所示。

    <fa-icon [icon]="faFacebook" [styles]="{'stroke': 'red', 'color': 'red'}">
    </fa-icon>