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 ...
随机推荐
- jmeter-请求头需要URIEncode编译时
使用函数 ${__urldecode()} 例如 :${__urldecode(%E4%BB%93%E5%BA%93)}${__urldecode(${参数变量})}
- jquery undelegate()方法 语法
jquery undelegate()方法 语法 作用:undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序.大理石平台支架 语法:$(selector).un ...
- 138企业邮箱pop/imap和smtp服务器地址
如果客户端设置的是pop模式:接收邮件服务器(pop):pop.138mail.net ,端口号是110 (如果勾选了SSL,端口号则变为995)发送邮件服务器(smtp):smtp.138mail. ...
- matplotlib(一):散点图
import numpy as np import matplotlib.pyplot as plt #产生测试数据 # x,y为数组 N = 50 x = np.random.rand(N) y=n ...
- Centos 7禁止ftdi_sio模块
$ dmesg[ 3305.097301] usb 1-1: USB disconnect, device number 7[ 3306.883704] usb 1-1: new high-speed ...
- ssh链接取消密码
进入到存放秘钥的文件夹,输入 ssh-add id_rsa 然后输入两次密码即可.
- Java Web项目案例之---登录注册和增删改查(jsp+servlet)
登录注册和增删改查(jsp+servlet) (一)功能介绍 1.用户输入正确的密码进行登录 2.新用户可以进行注册 3.登录后显示学生的信息表 4.可以添加学生 5.可以修改学生已有信息 6.可以删 ...
- Jmeter(十一)函数助手
可以在JMeter的选项菜单中找到函数助手对话框 我们可以从下拉列表中选择一个函数,并为其参数设定值.如图,表格的左边一列是函数参数的简要描述,右边一列是供用户填充参数的值.不同函数要求的参数也不同. ...
- 踩坑:VScode 集成 eslint 插件
本文以 Vue 官方脚手架 Vue-cli 为例: 1. 创建 Vue 项目 注意:Vue-cli 默认给出了 eslint 配置,一路回车即可.最后在安装模块的时候,选择直接安装!我用淘宝镜像安装时 ...
- pycloudtag_wordcloud 中英文标签云
https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...