您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何从父组件的CSS文件设置子组件的样式?

如何从父组件的CSS文件设置子组件的样式?

更新-最新方式

如果可以避免,请不要这样做。正如Devon Sans在评论中指出的那样:该功能很可能已被弃用。

更新-较新的方式

从 ,不推荐使用所有可穿透的CSS组合器。Angular团队推出了一种新的组合器 ,如下所示,

styles: [
    `
     :host { color: red; }

     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

方法

您可以使用encapsulation mode和/或piercing CSS combinators >>>, /deep/ and::shadow

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`
CSS 2022/1/1 18:22:20 有409人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶