Angular2 Material2 如何设置元素样式

Question

我很好奇为什么我的某些 scss 无法正确使用 angular-material2 元素。我正在使用 node-sass 来编译我的 scss，它似乎没有正确影响 css 文件。例如，我正在使用具有以下内容的 material2 演示应用程序：

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

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

Answer 1

Material2 为核心元素使用主题库。您可以使用带有 Sass 的 mixins 修改样式，或者为您的应用程序定义一个特定的主题。使用方法是：

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

https://material.angular.io/guide/theming

其次，为所选组件创建混合：

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

ng g c components/my_component_styleded

这将创建 4 个文件：

my_component_styleded.component.html
my_component_styleded.component.html.scss
my_component_styleded.component.spec.ts
my_component_styleded.component.html.ts

在 *.scss 中包含组件的一般样式（结构样式），在 *.html 文件中包含组件的结构 HTML。例如：

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

现在，在目录中创建了一个名为：'my_component_styleded.component.html.scss-theme.scss' 的新文件，并使用以下代码使用 mixin 来个性化按钮元素：

@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);
            }
        }
    }
}

您可以声明其他变量 Sass 和您心中的其他东西。

最后，你必须在应用程序的主style.scss中添加这个mixin：

--style.scss--

@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);

;)

Angular2 Material2 如何设置元素样式

Angular2 Material2 how way to style elements

angular

angular-material2