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. 题解 小B的询问

    题面 解析 这就是道莫队模板啊啊!! 因此,似乎并没有什么好讲的. 莫队算法传送门 我们只需要将询问存下来, 离线处理就行了. 还是上代码吧: #include<bits/stdc++.h> ...

  2. jquery change() 函数 语法

    jquery change() 函数 语法 作用:当元素的值发生改变时,会发生 change 事件.该事件仅适用于文本域(text field),以及 textarea 和 select 元素.cha ...

  3. POI2012 BEZ-Minimalist Security | noi.ac #537 Graph

    题目链接:戳我 首先注意这张图有可能不连通!! 然后我们考虑对于每一个联通块,首先任意确定一个点,给它设最终值为x,然后进行搜索.(因为对于一个联通块而言,我们知道一个点的最终值,那么整个联通块上面点 ...

  4. 数据分析师面经一(bk)

    2019年第一个数据分析面试: 先说一下心理感受,在BOSS多次看到这个岗位了,但是 呢一直没勇气去投这个岗位.首先毕竟是一个知名企业一万+人的公司,心里多少底气不足(小公司待习惯了吧),而且看岗位要 ...

  5. js判断是否是app,及版本号

    判断是否是android,ios,qq,wetchat export const Config = {}; Config.ua = navigator.userAgent.toLowerCase(); ...

  6. UCenter网站部署

    搭建LAMP环境部署UCenter LAMP环境: Linux+Apache+mysql+php  用来搭建动态网站或者服务器的开源软件 一.需要安装的软件 [root@tiandong ~]# yu ...

  7. AWS EC2 PV Drivers 驱动升级

    问题 从2019-10-23起,我的AWS实例不断的重启(大概6个小时左右),或者连接不上(远程连接不上并PING不通IP),但控制台显示running. 分析与解决方法 通过查看dump文件,发现是 ...

  8. 腾讯云服务器安装mysql

    首先,我们检测一下系统中是否已安装mysql的相关服务 命令: rpm -qa | grep mysql,无输出则证明未安装 然后我们使用yum检测查找系统自带的mysql安装文件. CentOS7的 ...

  9. 【.net core 0基础】创建你的第一个.net core应用

    1.下载.NET core相应的SDK,https://dotnet.microsoft.com/download 2.安装完成后,打开命令提示符,输入命令 dotnet,检查是否正确安装,如果命令能 ...

  10. springboot三种配置文件上传下载大小的配置

    配置文件为application.yml格式: spring: http: multipart: enabled: true max-file-size: 30MB max-request-size: ...