使用 angular 2 Material Design 设计风格的最佳方式是什么 [英] What is the best way to style using angular 2 material design

问题描述

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

I'm new to angular 2 material design the things i see was the 3 class primary, accent and warn that gives respective colors to the element, are these only things we can style out app using angular material 2? are there other class too? so that we can modify and use it for our purpose, or we have to style our app from scratch by making classes and attaching to the element,

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

Also I want to use themes but i dnt know how to use it in angular 2 project, im following official documentation this

我在 style.css 中包含了这一行，但什么也没发生

I included this line in style.css but nothing happened

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

顺便说一下主题的概念是什么

what is the concept of theme btw

推荐答案

如果您使用的是 angular-cli，我建议您这样做.

If you are using angular-cli, which I recommend you to do.

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

Create a 'custom-theme.scss' in your app folder.

@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 中将自定义样式添加到样式中:

In your angular-cli.json add the custom style to the styles:

app/custom-theme.scss

这篇关于使用 angular 2 Material Design 设计风格的最佳方式是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！