ng-zorro等组件默认样式的修改
https://www.jianshu.com/p/8b887c2aac06
在项目中修改ng-zorro组件默认样式的一些方法:
- 类名等 前加
::ng-deep; - 类名等 前加
:root; - 类名等 前加
:host /deep/;
::ng-deep .ant-spin-dot i {
background-color: #4c7bff;
}
:host ::ng-deep .ant-spin-dot i {
background-color: #4c7bff;
}
:root .ant-select-dropdown {
background-color: #1F273E;
font-size: 14px;
margin-top: 16px;
}
:host /deep/ .ant-spin-dot i {
background-color: #4c7bff;
}
注意:上面三种方法可分别尝试一下,不同情况下其中之一会生效。
截止目前最新的7.0.0-rc.0 版本
table组件tbody中的td中的内容超出时默认会换行,想要实现xxxx...的效果需要一个hack:
::ng-deep .ant-table-tbody > tr > td {
max-width: 0;
white-space: nowrap;
}
作者:tiger亮
链接:https://www.jianshu.com/p/8b887c2aac06
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
ng-zorro等组件默认样式的修改的更多相关文章
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
- Vue中修改组件默认样式
vue 中直接使用 class 修改组件的默认样式,在使用 scoped 之后,样式是没有效果. 此时可以使用div 包裹组件,deep 可以实现修改组件样式 .lxfix /deep/ .contr ...
- 更改微信小程序的组件默认样式
checkbox /*checkbox 整体大小 */ .checkbox { width: 12%; /* height: 240rpx; */ } /*checkbox 选项 ...
- element-ui默认样式修改
来自 :https://blog.csdn.net/wangguoyu1996/article/details/81394707 侵删 我们在使用element-ui的时候经常会遇到需要修改组件默认样 ...
- js自定义修改复选框单选框样式,清除复选框单选框默认样式
之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...
- css去除webkit内核的默认样式
做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和sel ...
- 【转】html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...
- html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...
- Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )
最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...
随机推荐
- 经常使用的js三元表达式
语法:条件?表达式1:表达式2 . 条件的括号可要可不要的 let istrue = true; let a = (istrue === true) ? '我是true啊' : "我是fa ...
- File上次文件找不到文件相对绝对路径
我的问题是因为文件的相对绝对路径上面有中午字符,把上面的中午字符全改为英文或者数字加特殊字符形式都可以
- jquery mouseenter()方法 语法
jquery mouseenter()方法 语法 作用:当鼠标指针穿过元素时,会发生 mouseenter 事件.该事件大多数时候会与 mouseleave 事件一起使用.mouseenter() 方 ...
- java+大文件断点续传
用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/1269085759/up6-jsp-mysq ...
- ACM之一个简单的数学问题
一个简单的数学题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 zyc最近迷上了数学,一天,dj想出了一道数学题来难住他.算出1/n,但zyc一时答不上来希望大家能编程 ...
- 「SNOI2017」礼物
题目链接:Click here Solution: 设\(f(x)\)代表第\(x\)个人送的礼物的数量,\(s(x)\)代表\(f(x)\)的前缀和,即: \[ f(x)=s(x-1)+x^k\\ ...
- Android 内存 - 获取单个应用内存限制
方法一: adb shell getprop | grep dalvik.vm.heapgrowthlimit [dalvik.vm.heapgrowthlimit]: [64m] 方法二: Acti ...
- 自定义MessageConverter--消息转换器
我们在进行发送消息的时候,正常情况下消息体为二进制的数据方式进行传输,如果希望内部帮我们进行转换,或者指定自定义的转换器,就需要用到MessageConverter 自定义常用转换器:MessageC ...
- svn 双备份
svn备份的方式有三种: 1svnadmin dump 2)svnadmin hotcopy 3)svnsync. 优缺点分析============== 第一种svnadmin dump是官方推荐 ...
- springboot 热部署替代方式
因为使用的 idea springboot2.2.0 snapshot版本, 常规的devtools方法实在是实现不了热部署,所以采用手动update的方法更新,测试可以成功更新resource里面的 ...