使用angular 2材质设计进行样式设置的最佳方法是什么 [英] What is the best way to style using angular 2 material design

问题描述

我是棱角2材质设计的新手，我看到的是3类主要，强调和警告元素的颜色，这些是我们唯一可以使用棱角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'

主题btw的概念是什么

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材质设计进行样式设置的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！