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 ...
随机推荐
- Codeforces 871C 872E Points, Lines and Ready-made Titles
题 OvO http://codeforces.com/contest/871/problem/C ( Codeforces Round #440 (Div. 1, based on Technocu ...
- hdu 6076 Security Check
题 OvO http://acm.hdu.edu.cn/showproblem.php?pid=6076 2017 Multi-University Training Contest - Team 4 ...
- jquery live()方法 语法
jquery live()方法 语法 作用:live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及 ...
- CSS的水平居中和垂直居中
水平居中如果不太熟悉盒子模型的话属实不太好理解,其实就是控制其他属性来让border之内的内容被控制在父容器中间就行了,最经典的就是使用{margin: 0 auto}了,控制其上下外边框为0,左右 ...
- 《剑指offer》算法题第七天
今日题目: 复杂链表的复制 二叉搜索树与双向链表 序列化二叉树 字符串的排序 1.复杂链表的复制 题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向 ...
- 在py文件中运行flask cli命令
主要是打包成exe之后,用于运行命令行. 命令行是 @app.cli.command() def mock(): ... 这样定义的 本来是用flask mock 这样方式运行的 打包后,希望用 ap ...
- HGOI 20191030am 题解
Problem A 腿部挂件 给出$n$个数的序列$a_i$,支持$T$次操作. 每次操作形如$x , l , r$,计算$\max_{i = l}^{r} (a_i \oplus x)$的值. 对于 ...
- luoguP5024 保卫王国
题目链接 问题分析 其实是比较明显的动态DP. 懒于再推一遍式子,直接用 最小权点覆盖=全集-最大权独立集,然后就和这道题一样了.题解可以看这里. 然后必须选或者不选的话,就直接把相应的点权变成\(- ...
- Routing(exchange--direct)
引言 它是一种完全按照routing key(路由关键字)进行投递的:当消息中的routing key和队列中的binding key完全匹配时,才进行会将消息投递到该队列中 1.模型 2.创建生产者 ...
- 05.用两个栈实现队列 Java
题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路 进栈: 直接进stack1 出栈: 若stack2不为空,则出栈. 否则,当stack1不为空时, ...