Angular 角度2材质2如何设置元素样式

我很好奇为什么我的一些SCS不能正确使用angular-material2元素。我正在使用节点sass编译我的scs，它似乎没有正确地影响css文件。例如，我正在使用material2演示应用程序，它具有以下功能：

.demo-sidenav-layout {
   md-sidenav {
        background-color: $left_nav;
        padding: 10px;
   }
}

---

（我添加了背景色）。这是设置元素样式的正确方法还是我应该只使用类。当我只添加了一个具有所需背景颜色的类时，它被默认元素样式覆盖。

Material2为核心元素使用主题库。您可以使用与Sass的混合来修改样式，或者为您的应用程序定义特定的主题。使用方法如下：

首先，使用官方文档创建一个主题：

其次，为所选组件创建mixin：

完成这项工作的方法很简单。例如，必须创建一个新组件

ng g c components/my_component_styleded

这将创建4个文件：

• my_component_styled.component.html
• my_component_styled.component.html.scss
• my_component_styled.component.spec.ts
• my_component_styled.component.html.ts

在*.scs中包括组件的常规样式（结构样式），在*.html文件中包括组件的结构html。 例如：

<div>
 <button md-raised-button routerLink="/stock">STOCK OF PRODUCTS</button>
</div>

你可以用Sass和你头脑中的其他东西声明其他变量

最后，您必须在应用程序的main style.scss中添加此混音：

--style.scss--

---

)()

我在这里有一个非常相似的问题的答案：可能重复的

@import '~@angular/material/theming';
@mixin my_component_styleded-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);

    div {
    button {
        color: $accent;
        &:hover, &:focus {
            color: $primary;
            border-left: 5px solid mat-color($accent);
            }
        }
    }
}

@import '~@angular/material/theming';
@include mat-core();

// Custom component themes:
@import 'app/components/my_component_styleded/my_component_styleded.component.scss-theme';
@mixin custom_component-theme($asis-light-theme) {
    @include my_component_styleded-theme($asis-light-theme);
}

// Light Theme
@include angular-material-theme($asis-light-theme);
@include custom-component-theme($asis-light-theme);