zoukankan      html  css  js  c++  java
  • [Angular] How to styling ng-content

    Let's say you are builing a reuseable component. The style structure like this:

    div > input

    If you want to style this input field, it can be quite easy, we can just use :host selector:

    :host input {
      outline: none;
      border: none;  
    }

    But one day you figure out that hard cord input into the component might not be a good idea. You want to use content projection 'ng-content' to do that. Now the html stucture boecomes:

    div > ng-content

    Even you know the ng-content will be the input field. But he will find that your styling no longer works.

    This is because Angular style encapsulation. It tries to preserve the style of projection element (because the element is not part of component, it has its own styling, we don't want to break that).

    So the way to solve this problem is using CSS '/deep/' selector.

    :host /deep/ input {
      outline: none;
      border: none;  
    }

    '/deep/' break angular style encapsulation. You can think it is a global css styling which can overwrite everything ..:P Sounds pretty prowerful, and a little bit damage, yes! it is.

    For example, if you doning like this :

    /deep/ input {
      outline: none;
      border: none;  
    }

    You will find that, all the input fields in your app has been affected!! So to be safe, use with :host selector.

  • 相关阅读:
    洛谷 1195 口袋的天空
    洛谷1955 程序自动分析
    【洛谷3295】[SCOI2016]萌萌哒
    洛谷2024 食物链
    八数码问题
    Codeforces Round #442 (Div. 2)
    Oracle 中truncate与delete的区别
    git命令提交步骤和解决冲突的
    git 更新代码到本地
    12、Python中的包
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6892220.html
Copyright © 2011-2022 走看看