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. 经常使用的js三元表达式

    语法:条件?表达式1:表达式2 .  条件的括号可要可不要的 let istrue = true; let a = (istrue === true) ? '我是true啊' : "我是fa ...

  2. File上次文件找不到文件相对绝对路径

    我的问题是因为文件的相对绝对路径上面有中午字符,把上面的中午字符全改为英文或者数字加特殊字符形式都可以

  3. jquery mouseenter()方法 语法

    jquery mouseenter()方法 语法 作用:当鼠标指针穿过元素时,会发生 mouseenter 事件.该事件大多数时候会与 mouseleave 事件一起使用.mouseenter() 方 ...

  4. java+大文件断点续传

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/1269085759/up6-jsp-mysq ...

  5. ACM之一个简单的数学问题

    一个简单的数学题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 zyc最近迷上了数学,一天,dj想出了一道数学题来难住他.算出1/n,但zyc一时答不上来希望大家能编程 ...

  6. 「SNOI2017」礼物

    题目链接:Click here Solution: 设\(f(x)\)代表第\(x\)个人送的礼物的数量,\(s(x)\)代表\(f(x)\)的前缀和,即: \[ f(x)=s(x-1)+x^k\\ ...

  7. Android 内存 - 获取单个应用内存限制

    方法一: adb shell getprop | grep dalvik.vm.heapgrowthlimit [dalvik.vm.heapgrowthlimit]: [64m] 方法二: Acti ...

  8. 自定义MessageConverter--消息转换器

    我们在进行发送消息的时候,正常情况下消息体为二进制的数据方式进行传输,如果希望内部帮我们进行转换,或者指定自定义的转换器,就需要用到MessageConverter 自定义常用转换器:MessageC ...

  9. svn 双备份

    svn备份的方式有三种: 1svnadmin dump 2)svnadmin hotcopy 3)svnsync.  优缺点分析============== 第一种svnadmin dump是官方推荐 ...

  10. springboot 热部署替代方式

    因为使用的 idea springboot2.2.0 snapshot版本, 常规的devtools方法实在是实现不了热部署,所以采用手动update的方法更新,测试可以成功更新resource里面的 ...