[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.
[Angular] How to styling ng-content的更多相关文章
- angular报错:angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
- Angular CLI 启动 版本ng 4
npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- 利用angular打造管理系统页面
1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目: ...
- 使用路由延迟加载 Angular 模块
使用路由延迟加载 Angular 模块 Angular 非常模块化,模块化的一个非常有用的特性就是模块作为延迟加载点.延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源.这样 Angular ...
- Angular07 利用angular打造管理系统页面
1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目: ...
- angular常见问题总结
本文引自:https://www.cnblogs.com/zhoulujun/p/8881414.html 这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理 ...
- Ngnice-国内ng学习网站
今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...
随机推荐
- web显示winform,web打开winform,IE打开winform
前言:为什么要用ie打开winform 个人觉得,winform部署client太麻烦如金蝶··用友,winfrom打补丁太麻烦,加入新功能再部署很费时间:于是就想为什么不能用IE打开呢?这样就不须要 ...
- Xcode 6 打包ipa文件
随着Xcode6.1的普遍应用.随之而来的非常多问题就会出现.这里来说一下怎样在Xcode6.1上生成Ad-hoc ipa.首先是要在你的开发人员账号上生成一个.ipa的主要应用就是在你公布到AppS ...
- worktools-源码下拉问题
今天下拉源码的时候,出现了一个问题,就是当地的内容跟仓库的内容冲突,导致merge冲突.这时候CC指令不能用.然后希望通过checkout到其他分支,然后cc掉的.结果没办法切换到其他分支,一直停留在 ...
- php课程 12-41 多态是什么
php课程 12-41 多态是什么 一.总结 一句话总结:一种请求,多种响应(根据参数类型和数量) 1.function useUsb(Usb $usb){}这句话是什么意思? 判断$usb参数是否实 ...
- Linux架设Jsp环境
本文已发表在2010年<网管员世界> 650) this.width=650;" onclick="window.open("http://blog.51ct ...
- CISP/CISA 每日一题 七
CISA 每日一题(答) 确保只有恰当授权的出站交易才能被处理,控制目的: 1.出站交易是基于授权而被启动: 2.出站交易包含了唯一的预先授权的交易类型: 3.出站交易只能被发送到合法的商业伙伴那里. ...
- 洛谷 P2677 超级书架 2
P2677 超级书架 2 题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有 ...
- 看好腾讯,鄙视百度(腾讯的核心竞争力,不是超过10亿的QQ的注册用户,也不是某一项产品、技术方面优势,而是“耐心”:懂得在合适的时间推出合适的产品。”)
百度,自始至终只是一个低劣的模仿者,且一切向前看,完全违背了一个搜索引擎所应该遵循的基本原则.谁给的钱多就能搜着谁,这跟贩毒有什么区别? 腾讯也在模仿别人,但是,它是模仿然后超越.在中国互联网发展历史 ...
- Nginx详细编译参数
本参数基于Nginx-1.15.2安装包 一 路径参数 1.1.1 指定Nginx安装路径 --prefix=/usr/local/nginx- 1.1.2 设置Nginx可执行文件路径默认路径在 - ...
- 1.1 Introduction中 Kafka as a Messaging System官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Kafka as a Messaging System kafka作为一个消息系统 ...