如何在CSS中构建宽度可设置的自定义角度组件？

这表明，我可以使用CSS更改侧导航的宽度，如下所示：

md-sidenav {
   width: 200px;
}

这给我带来了以下问题：我可以应用标准的CSS属性吗，比如

宽度

，

位置

，等等。。。要自定义组件而不在“我的组件”中定义它们

例如：

my-component {
    width: 500px;
}

我试过了，但不起作用。所以我想，答案是否定的，对吗

为了了解他们如何使用CSS设置

宽度

，我已经阅读了上的源代码。但我不明白他们是怎么做到的。组件没有

width

属性。那么，他们是如何使用CSS访问

width

的呢

---

编辑：

<p>test works!</p>

p {
   border: 2px solid red;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

<app-test>

</app-test>

为了澄清这个问题，我将给你举以下例子：

我已对以下组件进行了编程：

test.component.html:

<p>test works!</p>

p {
   border: 2px solid red;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

<app-test>

</app-test>

测试.组件.ts:

<p>test works!</p>

p {
   border: 2px solid red;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

<app-test>

</app-test>

这是我的应用程序根，由angular引导：

app.component.html:

<p>test works!</p>

p {
   border: 2px solid red;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

<app-test>

</app-test>

应用程序组件.ts

app-test {
  height: 100px;
  width: 200px;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test App';
  constructor() { }

}

---

\u app.component.css\u

显示了我想要做的事情。我想用CSS设置

\u app-test\u

组件的大小。我看到它与角度材质的

\u side-nav\u

组件一起工作，我想了解它们是如何使

\u side-nav\u

从父组件CSS文件中获取其宽度的。

在OP编辑后更新：

将您的

app.component.css

更改为：

:host {
  display:block; 
  height: 100px;
  width: 200px;
}

这将应用

上的样式


原始答案：

<p>test works!</p>

p {
   border: 2px solid red;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

<app-test>

</app-test>

您可以通过在组件中设置
封装：ViewEncapsulation.None
来覆盖Material 2组件的默认样式

然后，您必须在component.css文件中定义样式

.mat-sidenav {
    width: 250px;
}

请参见用户定义的宽度


OP评论后更新：

<p>test works!</p>

p {
   border: 2px solid red;
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

<app-test>

</app-test>

假设您有一个组件文件，
my.component.ts
，并且它在
my.component.css
中有样式，您可以在css文件中定义组件的样式，然后使用
：host
应用于组件选择器

my.component.ts：

my.component.css：

my.component.html：

模板中的某些标题
我的问题下面有威尔·豪厄尔的评论。这篇文章应该重述我从其他用户的评论中学到的东西，以便有类似问题的人可以从中学习

每个组件的模板都包装在宿主元素中。在sidenav示例中，此元素是md sidenav标记。宿主元素是一个常规的dom元素，因此可以向该元素添加标准css规则。这意味着您可以在开箱即用的情况下将css规则（如宽度）应用于每个自定义角度组件。但是，您必须考虑需要将主体元素的显示属性设置为块。如果不这样做，宽度规则对元素没有影响。
为了在md sidenav组件中实现这一点，他们将组件装饰器中的类mat drawer应用于元素

从sidenav.ts行使：

然后他们在样式表中设置规则。
抽屉的行使权。scss：

我认为正确的组件元数据属性名称是
封装
，而不是
视图封装
。看对了，我的错。更新了plunker和Answer在您的演示中，不需要替换选择器，也不需要更改选择。请参阅@Will Hoowell，您的gorked演示将在这种特定情况下工作，但它不会对所有组件运行。尝试设置
md toolbar
your way的高度，例如div具有属性width。因此，我可以在css文件中设置它的宽度。现在我构建了一个自定义组件mycomponent。它是否具有开箱即用的width属性，因此我可以使用css进行设置？希望很快将被合并，并涵盖自定义组件css。没有人可以帮助我吗？请尝试在
app.component.css
中使用
：host{height:…，width:…}
。我想那会满足你的要求。我不想那样做。我想了解我在问题中所写的语法为什么与md sidenav一起使用。我已经研究了源代码，但是我不明白为什么宽度css规则可以应用于_md-sidenav。sidenav组件已经关闭了视图封装。如果您在应用程序组件中执行相同的操作，则应该具有相同的效果。