Angular NG-ZORRO 如何修改默认样式

最新推荐文章于 2023-08-11 19:47:51 发布

原创最新推荐文章于 2023-08-11 19:47:51 发布 · 805 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Angular 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Angular中如何使用`:host`, `::ng-deep`和`:root`来控制组件样式的穿透和隔离。`:host::ng-deep`组合使用可以避免全局样式污染，而`:root`在本例中未生效，需要注意其正确用法。理解这些概念对于优化Angular应用的样式管理至关重要。

类名 前加::ng-deep；//会全局修改该组件的样式，也就是会把别人的样式给修改了，以你修改的为主了**加粗样式**
类名 前加:root；//试过没有效果
类名 前加:host /deep/；//不会全局修改
类名 前加:host ::ng-deep；//组合在一起用也可以，不会全局修改

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

门门m

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

angular11+ant zorro修改当前页面样式不影响全局

weixin_48751466的博客

02-26

417

TS:红色箭头为关键代码当前为 less: 页面

参与评论您还未登录，请先登录后发表或查看评论

修改ng-zorro默认样式

CommonBorage

01-18

1219

修改ng-zorro默认样式的各种方法 1、类名等选择器前加 ::ng-deep 全局修改ng-zorro的默认样式， 2、类名等选择器前加 :host ::ng-deep 当前组件修改ng-zorro的默认样式 3、类名等选择器前加:root 有的解决方法提到过，但亲身试过不好用，原因未明 4、类名等选择器前加:host /deep/ 当前组件修改ng-zorro的默认样式。如遇报错情况。可能是由于angular高版本弃用/deep/，使用第二条就可以。参...

:host ::ng-deep 和 ::ng-deep（已弃用）

lorie_yy的博客

01-09

888

:host::ng-deep

ng-zorro默认样式的设置

hotboyboy的博客

04-22

7346

以nz-tree为例在项目中修改ng-zorro组件默认样式的一些方法：类名等前加::ng-deep；类名等前加：root；类名等前加:host /deep/；三种方式都可以尝试一下，看看哪种有效果，我尝试了第一种就可以。类名：可以按F12进入开发者模式中获得，如图所示，尽量拷贝，不容易出错，有些点（.）号之间有空格，有些没有空格，多打空格导致你设置的样式会没有效果。在 /...

ng-zorro添加全局样式

shuididishui007的博客

07-14

3672

1、在搭建好的工程中，找到node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css

Angular：修改第三方组件的样式——ng-zorro等组件默认样式的修改

灿灿大王搭建的黄金屋

12-14

4940

在项目中修改ng-zorro组件默认样式的一些方法：类名等前加::ng-deep；类名等前加：root；类名等前加:host /deep/；例如：页面上左侧有一个菜单栏，使用了ant design中的导航栏组件，其中我们想改变导航选中的默认样式，可以先在控制台查看当前组件的类—— 可以看出来，当前组件的被选中时的样式属于.ant-menu-item-selecte...

angular-修改第三方组件、ng-zorro-antd css样式、自适应高度写法、表格td超出宽度隐藏

qq_36557846的博客

05-25

2486

:host，::ng-deep :host 表示选择当前的组件，只对当前这个组件起作用 :host .name { color:white; } ::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。 .leftRs ::ng-deep .material-icons { font-size: 44px; line-height: 50px; } 也可以这样使用，在当前组件里忽略层级关系 :host ::ng-deep .

修改第三方组件默认样式

weixin_52268321的博客

08-11

754

修改第三方组件默认样式，深度选择器

ng-zorro中Modal对话框细节操作

web

07-13

7406

很多时候，官网给的模板不适合我们的需求，这里是我对官网对话框的样式修改官网样式： 1、修改宽度具体代码： import { Component } from '@angular/core'; <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button> // 只加nzWidth属性，其他不变 <

Vue组件化

实践求真知

10-22

259

一点睛通过定义组件就可以通过组件名组件标签进行组件模板复用。二代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"..

Angular NG-ZORRO 如何修改ng-zorro-antd组件自身的样式

Ahua_Core的博客

06-03

1203

Angular NG-ZORRO 如何修改ng-zorro-antd组件自身的样式方法总结：前阵子在公司实习学习中，接触到了ng-zorro-antd这个组件库，用它来做了一些业务上的内容。方便好用是不需要说的了，但是有时候需要修改它自身的样式，为的是能和其它组件能够统一美观。这里总结一下修改ng-zorro-antd组件自身样式的几种方法，供需要时查阅参考。方法总结：类名等前加 ::ng-deep 类名等前加 :root 类名等前加 :host /deep/ ...

ng-zorro等组件默认样式的修改

menghuannvxia的专栏

04-26

3306

在项目中修改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; ...

ng组件冲突样式修改： :host ::ng-deep

阿龙的博客

12-23

6999

在使用一些第三方的组件的时候，要修改组件的样式。这种情况下使用: :host ::ng-deep .className{ 新的样式...... } 这样的方式就可以方便的修改样式了。比如领导嫌nz-timeline组件垂直距离太大，希望整个界面紧凑一点。我们就可以在使用了该组件的的组件中引入这样的CSS代码： //修改ant-timeline-item之间的间距 :hos...

angularJs 之 ng-options的几种用法

weixin_35549724的博客

09-05

5539

ng-options指令用于使用填充元素的选项。最常见的用法是使用数组填充：如 &amp;lt;select ng-model=&quot;selectedName&quot; ng-options=&quot;item.name for item in items&quot;&amp;gt; $scope.items= [&quot;Emil&quot;,Tobi

ng-zorro组件库默认样式修改

weixin_45304198的博客

09-05

2685

1.nz-zorro组件样式修改当我们想修改组件默认的样式时，一般是通过F12控制台，定位到需要修改的DOM元素，然后找到它对应的class，然后复制去我们对应代码的 css/less 文件中重写覆盖原有的组件样式。 // 重写组件样式，高度修改为0 .ant-timeline-item-last>.ant-timeline-item-content { min-height: 0px; } 但是发现这么写并没有修改成功，还是组件默认的样式。我们还需要在样式前面加上特殊的标识类名等

修改input框中placeholder

Menqq的博客

09-08

3467

placeholder颜色调整： /* WebKit browsers 适配谷歌 */ input::-webkit-input-placeholder { color: #BDCADA; } /* Mozilla Firefox 4 to 18 适配火狐 */ input:-moz-placeholder { color: #BDCADA; } /* Mozilla Firefox 19+ 适配火狐 */ input::-moz-placeholder { color: #B

Angular ng命令生成组件

Menqq的博客

05-07

2605

创建组件 ng命令生成组件会自动引入我们所创建的新组件中。建议ng命令作为创建组件的首选。在src/app/components/创建一个twoer组件命令： ng generate component <name> [options] ng g c <name> [options] （简写）常用的options: --export=true|false //true，将exports（导出）这个组件 --inlineStyle=true|false //样式是否为内联形式

ng-zorro - angular UI中 Form表单

Menqq的博客

06-16

2313

Form表单具有数据收集、校验和提交功能的表单，包含复选框、输入框、下拉选择框等元素。需要与Angular表单结合使用，可自由选择响应式表单或模板驱动表单。表单提供了三种排列方式：水平排列：标签和表单控件水平排列；（默认）垂直排列：标签和表单控件上下垂直排列；行内排列：表单项水平内排列。表单项nz-form-item 表单项用于区分表单中不同的区域，包含表单域和表单标签（可选）。所有nz-col的参数在nz-form-item上均可直接使用。表单标签nz-form-label 用于

svg图标更换颜色

Menqq的博客

09-06

2058

当面临一个项目拥有多套肤色时，图标更建议使用svg格式，不同色系不同图标颜色；给svg图标添加class <div class="column-item"> <div class="cp-pointer flex-box" (click)="gogogo(1)"> <!-- <img class="cp-l mr10 cp-icon" src="assets/images/schematwo.pn

NG-ZORRO中input输入框上添加前缀或后缀图标或文字

Menqq的博客

08-31

1675

import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-input-presuffix', template: ` <nz-input-group [nzSuffix]="suffixTemplateInfo" [nzPrefix]="prefixTemplateUser"> <input type="text" nz-input placeholder="Enter