Question

这site个状态，我可以用CSS改变侧面导航的宽度：

md-sidenav {
   width: 200px;
}

这引起了以下问题：我可以将标准CSS属性（如width，position等）应用于自定义组件，而无需在我的组件中定义它们吗？

示例：

my-component {
    width: 500px;
}

我尝试了它并且它不起作用。我想，答案是否定的，我是对的吗？

要了解他们如何使用CSS设置width，我已阅读github上的来源。但我无法弄清楚他们是如何做到的。该组件没有width属性。那么，他们是如何通过CSS访问width的呢？

修改

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

我编写了以下组件：

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>

app.component.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_显示了我想要做的事情。我想用CSS设置_app-test_组件的大小。我看到这与角度材质的_side-nav_组件一起使用，我想了解它们如何使_side-nav_从父组件CSS文件中获取其宽度。

Answer 1

更新OP后的修改：

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

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

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

原文答案：

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

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

.mat-sidenav {
    width: 250px;
}

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

OP评论后更新：

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

my.component.ts：

:host

my.component.css：

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

my.component.html：

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

Answer 2

我的问题在我的问题下回答了Will howel的评论。这篇文章应该回顾一下我通过其他用户的评论所学到的东西，以便有类似问题的人可以从中学习。

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

来自 sidenav.ts：

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

然后他们在样式表中设置规则。 drawer.scss：

的例外

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

     display: block;
}

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

2 个答案: