创建自定义主题，以覆盖采用了棱角分明材质内置表单控件 - 角4

我已经通过material.angular.io文档转眼就建立一个自定义主题&我试图创建一个自定义主题overridding表单控件像马里兰州输入文本框，文本区域，MD选择，复选框，radiobutton控件使用custom_theme.scss文件，这些文件具有覆盖这些输入控件的样式。创建自定义主题，以覆盖采用了棱角分明材质内置表单控件 - 角4

.mat-select-trigger { 
    font-size: 12px; 
    min-width: 200px; 
}

同样，对于其他表单控件覆盖颜色，字体样式自带的靛蓝粉红色的预建的主题，但似乎都没有得到应用我的风格。

我装我的主题如下.angular-cli.json文件：

"styles": [ 
     "styles.css", 
     "custom-theme.scss" 
    ]

&角材料2.0.0 beta.8的预建主题被放置在styles.css中..

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

我没有看到任何详细的文档或教程覆盖材料预构建主题中定义的窗体控件样式。

我需要采取的预建的主题样式复制到定制theme.scss和覆盖按我需要删除styles.css中靛蓝粉红色的预建主题的参考？或者，您能否提供其他建议？

来源

2017-08-03 BVS

有与封装的错误，让你无法忽略动态生成的元素的样式，如果你的风格不是全局性的。 3个解决方案是可能的：1）将您的样式放置在全局styles.scss文件中。 2）禁用视图封装设置：'封装：[ViewEncapsulation.None]'在你的组件中（但要小心，因为这个组件中的所有样式都将成为你的所有组件的全局）3）定义你自己的主题，这在许多帖子中都有描述在这非常websit.e –

@Flament，当前仿真封装模式是我想要的，根据我目前的需要。你可以请分享解释关于我详细定制主题的帖子吗？ – BVS

你好，是啊这里是︰https://stackoverflow.com/questions/40915277/change-build-in-colors-angular-2-material 此链接解释如何覆盖预先建立的主题颜色。另请参阅Kostas Siabanis链接：https：//stackoverflow.com/a/45478747/5710894您可以在其中找到替代默认主题样式的解决方案 –

你的问题是风格封装和AFAIK是不是一个错误。

从角documentation：

组件CSS样式被封装成组件的视图和不影响应用程序的其余部分。

因此，基本上，您在custom-theme.scss中包含的更改永远不会到达视图。您可以将组件的视图封装设置为NONE：

import {Component, OnInit, ViewEncapsulation} from '@angular/core'; 

... 

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None 
})

这应该允许更改到达视图。欲了解更多信息，你可以阅读这thread。

来源

2017-08-03 08:25:30

当前的Emulated封装模式是我希望按照当前需要使用的模式。我会花更多的时间来解决这个问题，如果你有一个代码笔，请分享.. – BVS

ViewEncapsulation.None的问题是这个组件的样式会传播到每个其他组件。如果他只想覆盖这个组件的预构建主题会怎么样？ –

无论如何，他应该使用自定义类。我会尽快提供一些代码。 –

我会说，这是用较少的封装问题，更具有角材料主题化配置。

为了改变特定角分量的主题，你就需要使用角材质密新的配置选项，并声明自己喜欢什么他们是一个自定义的主题。

这里有一个角材质文档的一个很好的名单，我一直在寻找相关的角5.1。（随着角度材质，5.0版的第一个稳定版本）

https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html

https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1

然后在这里是一个后获得动态主题为采用了棱角分明材料（> 5.0），您的应用程序。

Angular 2 Material Dynamic Themes

来源

2017-12-11 18:05:46

创建自定义主题，以覆盖采用了棱角分明材质内置表单控件 - 角4

回答

相关问题