Angular ::ng-deep不能在全局风格下工作
Angular中的::ng-deep是一个CSS伪类选择器，用于在组件样式中穿透到子组件的样式。它允许我们在组件样式中修改子组件的样式，即使这些样式被封装在子组件的Shadow DOM中。
然而，::ng-deep不能在全局样式中工作。这是因为Angular使用了Emulated Encapsulation（模拟封装）来实现组件样式的隔离性。在Emulated Encapsulation模式下，Angular会为每个组件生成唯一的CSS选择器，以确保组件样式只应用于该组件及其子组件。
当使用::ng-deep在全局样式中时，Angular无法确定应该将样式应用于哪个组件，因为全局样式不与特定组件关联。因此，::ng-deep在全局样式中不起作用。
如果您想在全局样式中修改组件样式，可以考虑以下几种方法：
- 使用:host选择器：使用:host选择器可以在组件的根元素上应用样式。例如，如果要修改一个组件的背景颜色，可以在全局样式中使用:host选择器来选择该组件的根元素，并设置背景颜色。
- 使用全局样式文件：您可以在Angular项目中创建一个全局样式文件，并在angular.json配置文件中将其引入。在全局样式文件中，您可以直接修改组件样式，而无需使用::ng-deep。
- 使用自定义CSS类：您可以在组件中定义一个自定义CSS类，并在全局样式中使用该类来修改组件样式。在组件模板中，将自定义CSS类应用于组件的根元素，然后在全局样式中选择该类并设置样式。
需要注意的是，以上方法都是在全局样式中修改组件样式的替代方案，它们可能会破坏组件的封装性和可重用性。因此，在使用这些方法时，应谨慎考虑其影响，并确保不会导致样式冲突或不可预料的行为。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
- 人工智能平台 AI Lab：https://cloud.tencent.com/product/ailab
- 物联网开发平台 IoT Explorer：https://cloud.tencent.com/product/iotexplorer
- 移动开发平台 MDP：https://cloud.tencent.com/product/mdp
- 云存储 COS：https://cloud.tencent.com/product/cos
- 区块链服务 BaaS：https://cloud.tencent.com/product/baas
- 元宇宙服务：https://cloud.tencent.com/product/metaspace
相关·内容
我创建了一个带有插入样式的组件 color: #6200EE !但是，当我将这段代码添加到全局样式中以在所有组件中使用它时，它就不起作用了。
浏览 9提问于2020-02-26得票数 1
回答已采纳
我面临一个有点奇怪的问题：::ng-deep在常规CSS中工作得很好，但是当我试图切换到SASS时，我发现所有用::ng-deep声明的样式(我需要使用::ng-deep来改变一些角度的材料样式)都不适用但所有其他风格都很好。需要说的是，我使用的不是纯角度："@angular/*": "5.0.3",
"@ionic-
浏览 0提问于2018-04-05得票数 3
回答已采纳
我一直在为我的angular项目使用ng-zorro，我正在使用这个组件：https://ng.ant.design/components/select/en#ng-content 然而，我需要为下拉菜单打开后显示的选项设置特定的，我尝试这样做： > :host ::ng-deep { .ant-select-dropdown {
> width: 112px !important; } } 然而，这种风格也适用于所有其他的dropdown，我只想给dr
浏览 56提问于2021-09-24得票数 1
我使用来自的agm-snazzy-window
有解释说我可以覆盖css类，但当我这样做时，它不会工作。
浏览 1提问于2018-02-03得票数 0
回答已采纳
7回答
在组件的css文件中有以下css： padding: 0;因此，我希望看到以下dom元素显示此规则(即使被重写)：但是，我所看到的在开发工具中的应用是： padding: 0 24px 16px;我注意到这个元素没有其他宿主元素所做的_ngcontent-c19类，所以我假设这是视图封装的情况。
但是，在阅读了以下内容之后:ng
浏览 1提问于2018-11-07得票数 29
我为我的Angular 6应用程序的主要组件创建了一个scss文件，在其中我为一个html元素添加了一个css属性。我想重写子组件中scss文件中的css属性。我试着把:host /deep/和!
浏览 2提问于2018-10-03得票数 2
: 1px solid #ccc; /*works*/ border: 1px solid #ccc; /*doesn't work*/你能分享一下达到预期结果的经验吗
浏览 1提问于2018-03-28得票数 4
回答已采纳
1回答
我对angular设计和造型是新手。我需要在一个新的项目中使用现有的样式设计。我的大学几个月前离开了，在他的项目中使用了这些样式。我采用了他的风格，但它们在我的项目中不起作用，尽管我安装了ui-bootstrap: npm install angular-ui-bootstrap 现有styles.css示例： .我发现组件已经使用了以'p‘开头的样式，而不是'ui’开头的样式，例如： .p-contextmenu {}, .p-dropdown{}, etc 我设法通过在.p-dropdown，p-t
浏览 11提问于2020-09-28得票数 0
我想让拇指标签一直显示，无论它是聚焦还是不聚焦。当我点击滑块时，它会显示这样的标签。 ? 但是一旦它没有被聚焦，标签就消失了。 ? 我怎么才能把标签留下来呢？
浏览 14提问于2019-09-23得票数 8
回答已采纳
我使用的是在https://material.angular.io/guide/theming-your-components中指定的样式指南 我的组件有一个mat-form-field，我想在其中更改边框颜色如果我将ng-deep样式放在component.scss文件中，它将被正确地应用，如下所示： :host ::ng-deep {
mat-form-field.active-field .我在my-component-lib.heme.scss中定义了一个mixin，它从应用程序的
浏览 7提问于2020-01-13得票数 0
回答已采纳
2回答
我已将角材料升级为9，但升级后，当我对席表列进行排序后，在排序后，底部边框出现在排序栏标题下，此边框在鼠标单击消失后，我检查了browser CSS，发现CSS下面是造成此问题的原因。[mat-sort-header].cdk-keyboard-focused .mat-sort-header-container,[mat-sort-header].cdk-program-focused .mat-sort-header-container但是这个CSS不在我的代码中，我不确定它是从哪里来的，我试图重写，
浏览 7提问于2022-07-08得票数 -1
回答已采纳
我试图像往常一样删除所有元素的边距和填充，但它似乎在Angular 7中不起作用。在这里，您可以看到仍然有边距：在全局Styles.sass文件中设置边距和填充为0；margin:0
padding:0
浏览 7提问于2018-12-18得票数 0
回答已采纳
我有一个关于scss和cli的问题: angular在运行时向应用程序标签(组件)添加了一个属性_nghost-fyw-1。
浏览 2提问于2016-06-08得票数 21
回答已采纳
1回答
我已经在我的图像视图中实现了库，它正在动态地加载许多HTML组件。我希望更改一些动态加载元素的CSS。
呈现前的HTML组件如下所示， <app-image-viewer [loadOnInit]="true" [showOptions]="false&
浏览 1提问于2019-10-12得票数 0
回答已采纳
有没有人能更清楚地解释一下md-input-container的属性是什么，或者提供一些代码。这里有一些代码，我觉得它应该可以工作，基于该文本的措辞。但事实并非如此。
浏览 3提问于2017-07-26得票数 5
1回答
因此，在我的全局scss风格中，我有一个对角材料样式的覆盖，如： padding: 0.5em 0 0.5em 0 !important;然后，我想对组件中的相同元素应用不同的填充，因为我需要更多的空间来查看更多的数据；下面是我的组件scss样式所做的工作：
:host ::ng-deep .mat-form-field-infix
浏览 3提问于2020-03-20得票数 1
回答已采纳
1回答
我试图在我的组件中改变PrimeNg手风琴的样式：简单的变化，比如字体风格，颜色变化.页面上说我可以用styleClass传递一个样式。这对我不起作用。在我的组件中，我可以通过以下方式删除阴影： box-shadow: none;据我所知，不建议使用ng深度。没有ng深度，除非我将CSS放入一个“全局”CSS文件中，否则不会发生任
浏览 6提问于2021-09-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
