如何设置嵌套的Angular组件的样式？
设置嵌套的Angular组件的样式可以通过以下几种方式实现：
- 使用CSS类选择器：在组件的样式文件中，可以使用CSS类选择器来选择嵌套组件的元素并设置样式。首先，在父组件的模板文件中给嵌套组件添加一个CSS类名，例如
<app-child-component class="nested-component"></app-child-component>，然后在父组件的样式文件中使用类选择器来设置样式，例如.nested-component { color: red; }。 - 使用:host选择器：在父组件的样式文件中，可以使用
:host选择器来选择嵌套组件，并设置样式。:host选择器表示当前组件本身，可以直接在父组件的样式文件中使用它来设置嵌套组件的样式。例如，:host { color: red; }。 - 使用::ng-deep伪类选择器：在父组件的样式文件中，可以使用
::ng-deep伪类选择器来选择嵌套组件，并设置样式。::ng-deep伪类选择器可以穿透组件的封装，直接作用于嵌套组件的元素。例如，::ng-deep app-child-component { color: red; }。
需要注意的是，使用::ng-deep伪类选择器可能会导致样式的全局污染，因此在使用时应谨慎，并尽量避免使用。
以上是设置嵌套的Angular组件的样式的几种常用方法。根据具体的需求和场景，选择合适的方法来设置样式。对于Angular开发，腾讯云提供了云开发平台，其中包括云函数、云数据库、云存储等服务，可用于快速构建和部署Angular应用。您可以了解更多关于腾讯云云开发平台的信息，请访问腾讯云官方网站：https://cloud.tencent.com/product/tcb
相关·内容
我已经创建了一个新的Angular CLI项目和一个组件，我已经尝试了css特异性的工作。在我尝试过的地方，类样式会覆盖标签样式，但只有在Angular项目中才能做到，反之亦然
我发现ViewEncapsulation.None使css样式显示深绿色背景色，而使用角度默认视图封装(ViewEncapsulation.Emulated)浏览器显示水背景色。
组件代码
import { Component, OnInit } from '@angular/core';
import {ToastrService} from "ngx-toastr";
//impor
浏览 1提问于2019-05-19得票数 1
2回答
角度更改MatInput大小
、、、、
我是Angular 4的新手，开始使用材料组件，我从官方文档中复制了几个示例，但没有得到与文档相同的结果：
如何更改文本框宽度？我试过style="width: 200px;“style="width:100%"；class=”class=-md-x“，但都不起作用，第二件事是如何在页面中间居中登录容器？我在这里找到了一些答案，但似乎没有一个有效，以下是我的代码：
<div class="container">
<div class="row">
<div class="col-md
浏览 1提问于2017-09-30得票数 28
回答已采纳
2回答
我已经开发了一个Angular2应用程序使用路由。
我的问题是：
我有一个登录页面，其中有不同的HTML和CSS.Once成功登录，我重定向到另一个页面有不同的HTML和CSS。但是我的主要布局是index.html(登录页面)。因此，我需要了解如何使用多个布局？
我做过一些研发工作，但我不知道如何实施？
请查找以下代码：
1) app.routing.module
import { NgModule } from '@angular/core';
import { Routes, Router, RouterModule } from '@angular/router
浏览 8提问于2016-12-13得票数 0
回答已采纳
1回答
是否有可能将Bootstrap的css文件隔离到一个Angular组件？
在styles.css或.angular-cli.json中全局包含文件时，全局样式会导致不应使用引导的其他组件出现问题。我试着从组件的CSS文件中导入它，但样式似乎不能正确呈现……
我使用的是Angular 5和Angular Cli 1.7.2。
浏览 0提问于2018-03-10得票数 3
我有一个关于scss和cli的问题: angular在运行时向应用程序标签(组件)添加了一个属性_nghost-fyw-1。同时，它向我的css添加了一个名为_ngcontent-fyw-1的属性选择器，这当然不会起作用。
你知道我该如何改变/避免这种行为吗？
PS:它也适用于常规的css。
我的组件.scss文件如下所示：
my-comp {
h1 {
background-color: red;
}
}
浏览 2提问于2016-06-08得票数 21
回答已采纳
我想在一个页面上显示我所有的angular 2组件，这样在我启动‘npm’之后就可以看到它们了……如何在路由器插座或亲子关系或类似的帮助下做到这一点？？我希望避免在AppModule.ts中引导所有这些组件
浏览 0提问于2017-07-08得票数 0
1回答
我希望将所有样式移动到单个样式表中，而不是单个组件样式。我可以控制我的样式，但是当我包含@角/材料组件时，它们作为单独的样式标签添加：
我有一个styles.scss文件，其中已经包括根据的材料设计。
// Include the default theme styles.
@include angular-material-theme($candy-app-theme);
如何将所有组件添加到单个样式表中？
编辑：@angular/material模块是这样添加的：
import { NgModule } from '@angular/core';
import {
浏览 0提问于2018-11-12得票数 1
回答已采纳
我的Angular2应用程序正在取得很好的进展，再次感谢您澄清如何使用MDL中的scss文件(回答了)。
但是，我现在很难覆盖MDL设置的某些默认样式。例如，我不希望选项卡中的选项卡使用“正当性-内容:中心”，而是使用“正当性-内容: flex-start"，因此选项卡左对齐。
我最初的方法是试图通过提供以下内容来覆盖该属性：
.mdl-tabs__tab-bar {
justify-content: flex-start;
}
直接在包含选项卡的组件的scss文件中。
但这不能作为我的选择器的Angular2作用域，例如：
.mdl-tabs__tab-bar[_ngcont
浏览 3提问于2016-10-25得票数 2
回答已采纳
我想在NgbProgressbar中添加一个css样式，但我在这样做时遇到了困难。具体来说，我想给进度条一个自定义颜色。使用上的“上下文进度条”演示，src/progressbar basic.ts文件的代码是：
import {Component} from '@angular/core';
@Component({
selector: 'ngbd-progressbar-basic',
templateUrl: 'src/progressbar-basic.html',
styles: [`
ngb-
浏览 1提问于2017-04-14得票数 1
回答已采纳
我安装了'react app 2‘和node-sass。它与SCSS一起工作得很好。但我只想知道如何创建像Angular这样的特定于组件的SCSS (这永远不会与其他组件SCSS冲突)
Angular自动为ViewEncapsulation添加属性请参见下面的示例
在angular中，有一个选项可用于
封装: ViewEncapsulation.None (用于禁用此组件的CSS封装)
浏览 1提问于2019-02-15得票数 1
1回答
我是Vaadin的新手，想知道如何布局对话框(com.vaadin.flow.component.dialog)。就我所见，我可以简单地向对话框中添加组件，但是如何在该对话框中布局或格式化组件呢？
我正在尝试创建一个简单的确认对话框。它可以工作，但按钮几乎相互重叠，这样它肯定不能交付给任何客户。那么，如何设置对话框的格式/布局呢？或者，我是否必须为对话框指定Id并使用CSS进行所有格式设置？
浏览 16提问于2019-04-01得票数 3
回答已采纳
我正在使用两个ng-bootstrap组件ngbDropdown和ngb-pagination，我希望它们彼此垂直对齐。
ngb-pagination组件使用.pagination类创建此HTML语言，边距为1rem
<nav>
<ul ng-reflect-class-name="pagination pagination-sm" class="pagination pagination-sm">
</ul>
</nav>
我尝试用我的Angular 2组件修改这个类，如下所示。
@Compon
浏览 0提问于2016-12-28得票数 6
我正在遵循ngx-datatable的主题化设置。
首先，我npm安装了ngx-datatable 10.4.0，因为它与Angular 4和早期版本的rxjs兼容。
我的问题是表格的样式。
我的模板文件如下所示：
<div>
<ngx-datatable
[rows]="rows"
[columns]="columns"
[columnMode]="'standard'"
class="material"
浏览 0提问于2018-04-17得票数 2
我正在尝试在ReactJS的嵌套组件中推送一些交互性。
。
这是我的NesterComponent.js：
<div {a general div}>
<div className={style.displayer} >
<IncludedComponent/>
</div>
</div>
这是我的IncludedComponent.js：
<div>
<div className={style.dish_footer}>
浏览 9提问于2018-08-19得票数 0
回答已采纳
2回答
我正在尝试更改md-menu的默认角度材质样式。问题是Angular材质动态地生成元素，而我无法从我的HTML访问它们。
这是我的DOM：
下面是我的组件超文本标记语言(md-menu生成DOM)：
<md-toolbar color="primary">
<h1>Logo</h1>
<span class="spacer"></span>
<img src="../../../images/avatar-default.png" class="ava
浏览 0提问于2017-07-09得票数 0
回答已采纳
我的Angular web组件有一些问题。我的angular应用程序包含web组件作为子组件，但问题是子组件的css也应用于其父组件。
例如，在web组件中，它的body标签上有一些样式。但是，它也覆盖了其父对象的样式。有什么方法可以避免这种情况吗？
<div id="my-app">
<webcomponent></webcomponent>
</div>
浏览 12提问于2021-06-10得票数 0
我创建了一个新项目，安装了字体-太棒了：
"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-brands-svg-icons": "^5.9.0",
进口FontAwesomeModule
imports: [
...,
FontAwesomeModule
],
并创建了一个简单的图标：
faFacebook
浏览 1提问于2019-06-30得票数 1
回答已采纳
在Angular 2+中，我们有@component指令，我们可以在其中传递元素选择器、css文件、html模板文件、..我们通过下面的代码片段来实现。 import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeCom
浏览 19提问于2019-01-24得票数 0
在react中，我可以任意传递道具，如下所示：
function SomeComponent(props) {
const {takeOutProp, ...restOfProps} = props;
return <div {...restOfProps}/>;
}
我如何在Angular中做同样的事情？
--
更具体地说，我想要编写一个自定义的dropdown组件，并将道具向下传递给一个选择框。
浏览 1提问于2017-11-15得票数 18
回答已采纳
4回答
角6库共享样式表
、、、、
如何设置index.scss并将变量、混合体等的全局样式表导入到角6库？
角CLI生成一个带有根组件& components的库，但是添加或导入到根组件的样式对子组件不可用。这在默认情况下封装样式是有意义的，但我只是找不到关于如何设置这些样式的任何信息或示例。
angular.json "styles": [...]路径(可用于"projectType": "application" )似乎也不适用于"projectType": "library"。
提前感谢您的帮助！
更新:我的项目是使用角CLIv6.
浏览 3提问于2018-05-29得票数 30
虽然Angular对Web components有本机支持，但我不清楚如何在不泄露托管页面样式的情况下使用SCSS设置web组件的样式。 显然，如果组件在其.scss文件中定义了其规则，则这些规则仅适用于该组件。 +-----------------------------------------------------------------------+
| |
|
浏览 9提问于2021-02-10得票数 2
1回答
对于这个输入组件，我想把它作为其他组件的基本组件。
import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";
export const TextField: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
props
) => {
return (
<Input type="text" {...p
浏览 4提问于2022-07-04得票数 0
回答已采纳
所以我正在写一个棱角分明的应用程序，我试着重新设计一个垫子形状的字段。
HTML：
<mat-form-field #matFormField class="example-full-width" >
<input #autocompleteInput type="text" placeholder="Enter {{searchBy.value}}" aria-label="Number" matInput [formControl]="myControl"
[ma
浏览 2提问于2020-03-04得票数 2
回答已采纳
2回答
我在一个Angular项目中有以下代码
<input class="form-control" type="number" [(ngModel)]="cons.failPercent" [ngModelOptions]="{standalone: true}"
mdTooltip="Typically valves can be repaired three times before they need to be replaced"
浏览 0提问于2018-01-30得票数 2
1回答
我尝试使用Angular 8绑定数据，但失败得很糟糕。我尝试过的一种方法如下：
<div class="speed" style="background-image: url('http://example.com/assets/images/meter.png')" [ngStyle]="{'--p':result.percentage}"></div>
和输出：
<div _ngcontent-kyh-c1="" class="speed" styl
浏览 21提问于2019-11-27得票数 0
回答已采纳
我正在尝试设置一个具有templateURL的组件，它是给定配置模块的相对路径。但是，由于它位于控制器之外，我不知道如何在配置中引入依赖项
app.config.js：
angular.module('app.config', [])
.constant('config', {
TEMPLATES_URL: 'js_2/templates/',
COMPONENTS_URL: 'js_2/components/'
})
home.app.js：
angular.module('home.app&
浏览 27提问于2016-08-02得票数 0
1回答
我听过很多关于角的第二次出现的讨论，其中似乎有很多奇妙的东西，但我知道，角1.0并没有现成的Web组件集成。
我读过一些关于Angular2的文章，它不再使用指令。所以，我想知道这是否意味着Angular2将在没有任何额外集成的情况下使用聚合物/HTML模板和其他Web组件？
浏览 2提问于2016-10-24得票数 7
2回答
我尝试将我的项目从angular JS升级到angular 4。我已经在angular JS项目中使用了样式表。
这是我的文件夹结构
我使用angular CLI创建了组件。一切都很完美，但是我不知道如何在angular 4项目中使用我的风格。有人能解释一下我如何在全球范围内使用我的风格吗？而且也只在某些组件中？
浏览 0提问于2017-09-22得票数 7
1回答
我正在尝试在两个自定义主题之间切换。然而，只有我的页面上的一些项目在切换单击时切换。如何也切换其他元素，如边框、文本和悬停颜色？
Index.html
<body class="DefaultTheme">
<app-root></app-root>
</body>
app.component.html
<div>
<mat-slide-toggle name="toggle" (click)="changeTheme()">Change theme</ma
浏览 24提问于2019-10-28得票数 0
我试着用通用的+ webpack和Angular2。但我不明白为什么样式要在head元素上加载两次。
这就是我分叉的地方，我没有改变任何东西！
我可以在这里写代码，但会变得一团糟。
Bellow是我的控制台截图，显示相同的样式被加载了两次：
有人能解释Angular2是如何使用css的吗？
提前谢谢。
浏览 1提问于2016-05-22得票数 10
2回答
我正面临一些问题，在加载泡沫图表指定/所需的颜色。我尝试了POC，它工作得很好，但是当图表装载了实际的应用程序时，颜色就发生了改变，即其他一些引导css类正在覆盖指定的值，而气泡/圆圈则以黑色呈现。我在index.html中使用以下引导引用。
<!-- Bootstrap and JQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="
浏览 7提问于2016-08-17得票数 0
回答已采纳
5回答
我在Angular 2中有一个叫做my-comp的组件：
<my-comp></my-comp>
在Angular 2中，如何设置此构件的主体图元的样式？
在聚合物中，你可以使用":host“选择器。我在Angular 2中试过了，但是它不能工作。
:host {
display: block;
width: 100%;
height: 100%;
}
我还尝试使用组件作为选择器：
my-comp {
display: block;
width: 100%;
height: 100%;
}
这两种方法似乎都不起作用。
谢谢。
浏览 41提问于2015-09-30得票数 224
回答已采纳
我目前在我的项目中使用的是资料用户界面。它运行得很好，但有一件事我不明白，那就是如何使用JSS对子组件和同级组件进行样式设计。
例如，Material的组件呈现如下内容：
<div class="MuiFormControl-root-36 MuiFormControl-marginNormal-37">
<label class="MuiFormLabel-root-45 MuiInputLabel-root-40 MuiInputLabel-formControl-41 MuiInputLabel-animated-44 MuiInputLa
浏览 0提问于2018-08-30得票数 3
1回答
我有一个使用angular-cli构建的angular2应用程序，其中包含几个组件。每个组件都有一个引用样式表(scss)。
这些样式表中的独特样式被正确地应用于component-template。
我不能做的是覆盖来自外部css的样式，这些样式包含在那些组件样式表的angular-cli中。
一旦我将样式移到中央styles.scss，它就会工作。
我的angular-cli.json如下所示：
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../
浏览 22提问于2017-02-07得票数 9
回答已采纳
我已经尝试了关于Stack Overflow的现有答案，只需更改“.tooltip-inner”样式即可。但我仍然看到默认的黑色背景。
我尝试过的css：
.tooltip-inner {
background-color: pink !important;
}
带有工具提示的HTML：
<strong #customTooltip="bs-tooltip" tooltip="Click below on your options" placement="bottom">Some Text</strong>
<i
浏览 1提问于2018-06-19得票数 3
有没有办法改变Angular Material元件库中mat-slide-toggle元件的颜色属性？如何覆盖它的样式？
或者有没有人能建议我在angular 5中使用其他的滑动切换，比如材质滑动切换？
浏览 15提问于2018-06-13得票数 21
我正在设置一个基本的angular应用程序，并尝试将一些css注入到我的视图中。这是我的一个组件的示例：
import { Component } from 'angular2/core';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { LandingComponent } from './landing.component';
import { PortfolioComponent } from '
浏览 1提问于2016-03-26得票数 29
回答已采纳
我有可重用的组件“两列布局包装器”，其样式在主文件.css中。我想在另一个模块中使用这个组件，但我需要2个不同宽度的类。如何替代样式？
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Response } from '@angular/http';
@Component({
selector: 'italik-managepackages
浏览 2提问于2017-06-26得票数 3
我当前的应用程序(通过角CLI生成)如下所示：
angular.cli.json (位于根文件夹)：
....
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"styles.css"
],
src/app/app.module.ts
import {Browse
浏览 2提问于2018-01-15得票数 25
回答已采纳
3回答
我有一个组件页面和相应的样式表，但是component.scss中的类并不适用于该页面。没有错误，我仍然想知道为什么？
这是我的产品-detailpage.Component.html
<div>
<h1>Product Detail Page</h1>
</div>
这是.ts文件
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Productd
浏览 0提问于2018-06-26得票数 13
我有一个带有自定义主题的angular应用程序，大多数组件都不需要引导，所以在我的angular.json中我只包含了bootstrap.grid.css。
随着应用程序的开发，我需要bootstrap，但将其包含在angular.json中会影响其他组件中的样式。
是否有选项仅在此特定组件中使用bootstrap。
我在css文件中尝试了这个@import "bootstrap/dist/css/bootstrap.css";，但是没有帮助。
TIA :)
浏览 0提问于2020-07-22得票数 1
我有一个名为my-element的简单元素，并且希望在相邻的my-elements之间有2em垂直空间。
my-element + my-element { margin-top: 2em; }
my-element是一个WebComponent，我已经在我的Angular2组件中将其声明为ViewEncapsulation.Native，这意味着样式被隔离在阴影DOM中并且不能更改，或者至少在不应用/deep/选择器(？)的情况下不能更改。由于边距在my-element的框模型中，我假设对my-element应用边距实际上不应该影响my-element。这基本上就是我正在经历的事情。
那么，
浏览 0提问于2016-10-10得票数 0
我在angular-cli.json "../node_modules/bootstrap/dist/css/bootstrap.min.css"中有in样式。为什么当我删除这些行并添加到每个组件@import "{correct path to every directory/node_modules/bootstrap/dist/css/bootstrap.min.css}"中的每个css时，它不能像以前那样工作？
浏览 0提问于2018-04-17得票数 1
2回答
我有一个相当基本的组件，它将消息传递给用户：
...
let dialogRef = this.dialog.open(
UserMessagingDialog,
{
data: {
'messages': this.messagesToShow,
'messageColors': this.messageColors,
'messageI
浏览 4提问于2017-07-11得票数 1
回答已采纳
我有一个内容编辑器，使用这个编辑器，我希望用户能够保存到外部域的链接，并将其显示为iframe。
iframe出现了，但是当我尝试将CSS规则应用于iframe (不是iframe中的内容，标签本身)时，无论我做什么，它都不起作用，规则甚至不会出现在开发人员控制台中。我在同一张纸上有更多的规则，它们工作得很好。
目前我有以下css：
iframe, .ql-video {
height: 500px !important;
width: 300px !important;
}
这是我正在测试的iframe：
<iframe class="ql-video" fra
浏览 66提问于2018-07-19得票数 1
回答已采纳
1回答
有没有办法把scss分成不同的模块。具体来说，如果我有两个模块，分别称为module_1和module_2，以及两个scss文件，分别称为module_1.scss和module_2.scss。我希望我的angular module_1加载除module_2.scss之外的其他scss，同样，对于module_2，我不希望加载module_1.scss。我如何在angular中实现这一点。
提前谢谢。
浏览 0提问于2019-04-04得票数 0
1回答
我是Angular2和NodeJs的新手。我只想知道在angular2和Nodejs应用程序中集成外部css和js的可能方法。例如，我希望在Nodejs中集成引导管理主题。下面是截图附件，以供应用程序结构参考。
在客户端文件夹angular2中截图。
快速Nodejs应用程序的截图。
谢谢。预先。
浏览 4提问于2017-06-21得票数 0
我正在尝试使用一个我目前正在开发的应用程序中的摩纳哥编辑器，我需要突出显示在编辑器中的一些代码行。我目前使用的是angular组件ngx-monaco editor(www.npmjs.com/package/ngx-monaco editor)。
我在摩纳哥操场上看到了一种方法，可以用下面的方法做我想做的事情：()
通过使用angular组件，我可以使用事件发射器访问对象。我还比较了组件中的对象和游乐场中的对象，它们具有相同的属性，因此我假设它们是相同的。为了在大型应用程序之外测试它，我开始了一个小的angular项目，遵循ngx-monaco editor文档，以便有匹配的代码进行比较。
浏览 18提问于2019-06-26得票数 4
回答已采纳
2回答
这个声明，我可以用CSS改变侧导航的宽度，如下所示：
md-sidenav {
width: 200px;
}
这引发了以下问题:我能否应用标准的CSS属性，如width、position等.自定义组件而不需要在组件中定义它们？
示例：
my-component {
width: 500px;
}
我试过了，但不起作用。所以我想，答案是否定的，对吗？
为了了解他们是如何用CSS设置width的，我已经阅读了上的源代码。但我不知道他们是怎么做到的。该组件没有width属性。那么，他们是如何用CSS访问width的呢？
编辑：
为了澄清这个问题，我将给出以下例子：
我编写了以下组件
浏览 1提问于2017-08-21得票数 6
回答已采纳
我想知道是否有可能切换一个主题(2个样式表)。我的实际配置是angular-cli.json配置中的样式表A。我想要做的是用一个简单的(单击)切换器将样式表A替换为样式表B。
如果我要在index.html中导入样式表，代码将如下所示
组件：
constructor() { }
toggleTheme() {
this.darkTheme = this.lightTheme;
}
Index.html
<div [class.dark]="darkTheme">
<div [class.light]="lightTheme"&
浏览 0提问于2017-11-02得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
