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等组件默认样式的修改的更多相关文章

  1. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

  2. Vue中修改组件默认样式

    vue 中直接使用 class 修改组件的默认样式,在使用 scoped 之后,样式是没有效果. 此时可以使用div 包裹组件,deep 可以实现修改组件样式 .lxfix /deep/ .contr ...

  3. 更改微信小程序的组件默认样式

    checkbox /*checkbox 整体大小  */ .checkbox {      width: 12%;      /* height: 240rpx; */ } /*checkbox 选项 ...

  4. element-ui默认样式修改

    来自 :https://blog.csdn.net/wangguoyu1996/article/details/81394707 侵删 我们在使用element-ui的时候经常会遇到需要修改组件默认样 ...

  5. js自定义修改复选框单选框样式,清除复选框单选框默认样式

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...

  6. css去除webkit内核的默认样式

    做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和sel ...

  7. 【转】html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...

  8. html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...

  9. Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )

    最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...

随机推荐

  1. jmeter-请求头需要URIEncode编译时

    使用函数 ${__urldecode()} 例如 :${__urldecode(%E4%BB%93%E5%BA%93)}${__urldecode(${参数变量})}

  2. jquery undelegate()方法 语法

    jquery undelegate()方法 语法 作用:undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序.大理石平台支架 语法:$(selector).un ...

  3. 138企业邮箱pop/imap和smtp服务器地址

    如果客户端设置的是pop模式:接收邮件服务器(pop):pop.138mail.net ,端口号是110 (如果勾选了SSL,端口号则变为995)发送邮件服务器(smtp):smtp.138mail. ...

  4. matplotlib(一):散点图

    import numpy as np import matplotlib.pyplot as plt #产生测试数据 # x,y为数组 N = 50 x = np.random.rand(N) y=n ...

  5. Centos 7禁止ftdi_sio模块

    $ dmesg[ 3305.097301] usb 1-1: USB disconnect, device number 7[ 3306.883704] usb 1-1: new high-speed ...

  6. ssh链接取消密码

    进入到存放秘钥的文件夹,输入 ssh-add id_rsa 然后输入两次密码即可.

  7. Java Web项目案例之---登录注册和增删改查(jsp+servlet)

    登录注册和增删改查(jsp+servlet) (一)功能介绍 1.用户输入正确的密码进行登录 2.新用户可以进行注册 3.登录后显示学生的信息表 4.可以添加学生 5.可以修改学生已有信息 6.可以删 ...

  8. Jmeter(十一)函数助手

    可以在JMeter的选项菜单中找到函数助手对话框 我们可以从下拉列表中选择一个函数,并为其参数设定值.如图,表格的左边一列是函数参数的简要描述,右边一列是供用户填充参数的值.不同函数要求的参数也不同. ...

  9. 踩坑:VScode 集成 eslint 插件

    本文以 Vue 官方脚手架 Vue-cli 为例: 1. 创建 Vue 项目 注意:Vue-cli 默认给出了 eslint 配置,一路回车即可.最后在安装模块的时候,选择直接安装!我用淘宝镜像安装时 ...

  10. pycloudtag_wordcloud 中英文标签云

    https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...