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 ...
随机推荐
- Python 网络编程Ⅱ
客户端 接下来我们写一个简单的客户端实例连接到以上创建http://www.weixiu3721.com/的服务.端口号为 12345. socket.connect(hosname, port ) ...
- Spring 初探(二) AOP 图集
Spring AOP属于第二代AOP.采用Java作为AOP的实现语言(AOL),采用动态代理机制和字节码生成技术实现. 代理设计模式 ISubject 对被访问者或者被访问资源的抽象,某些场景下不使 ...
- 数据类型之字符串类型与Number类型
㈠字符串类型 ⑴在JS中字符串需要使用引号引起来 ⑵使用双引号或单引号都可以,但是不要混着用 ⑶引号不能嵌套,双引号不能放双引号,单引号不能放单引号 ⑷在字符串中,可以使用“\”作为转义字符,当表示一 ...
- jquery load() 方法 语法
jquery load() 方法 语法 作用:当指定的元素(及子元素)已加载时,会发生 load() 事件.该事件适用于任何带有 URL 的元素(比如图像.脚本.框架.内联框架).根据不同的浏览器(F ...
- Jmeter工具使用-分布式架构和服务器性能监控解决方案
在对项目做大并发性能测试时,常会碰到并发数比较大(比如需要支持10000并发),单台电脑的配置(CPU和内存)可能无法支持,这时可以使用Jmeter提供的分布式测试的功能来搭建分布式并发环境. 一.J ...
- JVM(七),JVM面试小知识
七.JVM面试小知识 1.JVM三大性能调优参数 -Xms -Xmx -Xss 的含义 2.java内存模型中堆和栈的区别 3.不同JDK版本中的intern()方法的区别
- ASCII和UTF-8
造冰箱的熊猫@cnblogs 2018/12/11 用了这么久的UTF-8,第一次了解了点UTF-8的细节 UTF-8[1]属于变长度编码.一个UTF-8字符的编码长度为1~4个字节. 1)长度为1个 ...
- python celery 异步学习
1.运行redis 2.安装celery:pip install celery[redis] 3.vim task.py import time from celery import Celery b ...
- 转:玩转HTML5移动页面(动效篇)
作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就 ...
- npm脚本编译代码
echo offset codeUrl=D:\svn\oppo_mis\OCSS_NEW\Branches\ProjectCode20190909\h5_ocssset publishUrl=D:\P ...