1

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

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

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

4

1 回答 1

1

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

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

其次，为选定的组件创建一个 mixin：

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

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 和其他东西声明其他变量。

最后，你必须在 App 的 main style.scss 中添加这个 mixin：

-- 样式.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);

;)

于 2017-08-04T22:02:24.797 回答