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

Question

该站点声明，我可以使用 CSS 更改侧导航的宽度，如下所示：

md-sidenav {
   width: 200px;
}

这惹人我以下问题：我可以申请像标准的CSS属性width，position等等...定制组件，而不在我的组件来定义呢？

例子：

my-component {
    width: 500px;
}

我试过了，它不起作用。所以我认为，答案是否定的，对吗？

为了了解它们如何设置widthCSS，我阅读了github上的源代码。但我想不通他们是怎么做到的。该组件没有width属性。那么，它们是如何width通过 CSS 实现的呢？

---

编辑：

为了澄清这个问题，我会给你下面的例子：

我已经编写了以下组件：

test.component.html：

<p>test works!</p>

test.component.css：

p {
   border: 2px solid red;
}

test.component.ts:

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() { }

}

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

app.component.html：

<app-test>

</app-test>

应用组件.css

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

app.component.ts

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

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

}

该_app.component.css_节目是我想做的事情。我想_app-test_用 CSS设置组件的大小。我看到这与_side-nav_角度材料的组件一起工作，我想了解它们如何使_side-nav_能够从父组件 CSS 文件中获取其宽度。

Answer 1

OP 编辑​​后更新：

将您的更改app.component.css为：

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

这将应用<app-test>选择器上的样式。这是plunker 演示。

原答案：

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

然后你必须在你的 component.css 文件中定义样式。

.mat-sidenav {
    width: 250px;
}

使用用户定义的宽度查看此plunker 演示。

OP评论后更新：

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

my.component.ts ：

@Component({
    selector: 'my-comp', 
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent{
}

my.component.css ：

:host {
    width: 500px;
    background-color: red;
}

我的.component.html：

<h2>Some Heading in the Template </h2>

Answer 2

我的问题得到了威尔·豪厄尔在我的问题下面的评论的回答。这篇文章应该回顾一下我从其他用户的评论中学到的东西，以便有类似问题的人可以从中学习。

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

摘自sidenav.ts：

    host: {
    'class': 'mat-drawer mat-sidenav',
    ...
  },

然后他们在样式表中设置规则。抽屉.scss摘录：

 .mat-drawer {
     @include mat-drawer-stacking-context();

     display: block;
}