【问题标题】:What is the best way to style using angular 2 material design使用 angular 2 材料设计的最佳样式是什么
【发布时间】:2017-04-10 16:50:37
【问题描述】:

我是 Angular 2 材料设计的新手,我看到的东西是 3 类主要、重音和警告,它们为元素提供了各自的颜色,这些是我们可以使用 Angular 材料 2 设计应用程序样式的唯一东西吗?还有其他课吗?这样我们就可以修改和使用它来达到我们的目的,或者我们必须通过创建类并附加到元素来从头开始设计我们的应用程序,

我也想使用主题,但我不知道如何在 angular 2 项目中使用它,我正在关注官方文档 this

我在 style.css 中加入了这一行,但什么也没发生

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'

顺便说一句,主题是什么概念

【问题讨论】:

    标签: css angular angular-material angular-material2


    【解决方案1】:

    如果你使用 angular-cli,我建议你这样做。

    在您的应用文件夹中创建一个“custom-theme.scss”。

    @import '~@angular/material/core/theming/all-theme';
    // Plus imports for other components in your app.
    
    // Include the base styles for Angular Material core. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    @include md-core();
    
    // Define the palettes for your theme using the Material Design palettes available in palette.scss
    // (imported above). For each palette, you can optionally specify a default, lighter, and darker
    // hue.
    $primary: md-palette($md-indigo);
    $accent:  md-palette($md-pink, A200, A100, A400);
    
    // The warn palette is optional (defaults to red).
    $warn:    md-palette($md-red);
    
    // Create the theme object (a Sass map containing all of the palettes).
    $theme: md-light-theme($primary, $accent, $warn);
    
    // Include theme styles for core and each component used in your app.
    // Alternatively, you can import and @include the theme mixins for each component
    // that you are using.
    @include angular-material-theme($theme);
    

    在您的 angular-cli.json 中将自定义样式添加到样式中:

    app/custom-theme.scss
    

    【讨论】:

    • 这是使用 angular2 材料设计来设计应用程序样式、创建自定义主题的唯一方法吗?或者我们可以通过哪些方式来设置样式、类?
    • 这是正确的做法,你也可以覆盖他们的风格,但不推荐。
    猜你喜欢
    • 1970-01-01
    • 2019-04-11
    • 1970-01-01
    • 2018-03-19
    • 1970-01-01
    • 2015-06-10
    • 2016-08-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多