Question

如何更改material2 md输入占位符字体大小和颜色？

Answer 1

注意：/ deep /现在已弃用，请使用：host :: ng-deep 。请记住:: ng-deep在技术上也被弃用，将被组合器取代，但应该暂时使用

您遇到的问题是使用ViewEncapsulation。这是一个烦恼，但从我能够收集到的东西开始按预期工作。

你有能力使用一些额外的角色来改变你喜欢的风格。您必须使用special selector: /deep/

例如，如果您想按照问题中的描述更改占位符文本的颜色，则可以创建如下样式：

/deep/ .mat-input-placeholder {
    color: #fff;
    font-size: 2em;
}

然而，这不会改变下划线样式。如果你想改变它，你只需添加另一种风格，如：

/deep/ .mat-input-ripple.mat-focused {
    background-color: #fff;
}

如果您仍想在特定组件中设置材质组件的样式，可以使用:host selector：

:host /deep/ .mat-input-placeholder {
   font-size: 2em;
}

Answer 2

您可以在样式css / scss中编写自己的样式，例如：

md-input-container{  width: 100%;  .md-input-placeholder {
color: #a8a8a8;
padding: 0 12px;

&.md-float {
  &.md-focused,
  &:not(.md-empty) {
    transform: translateY(-100%) scale(0.95);
  }
}  }}

Answer 3

以下为我工作

在.CSS文件中

::ng-deep .mat-input-wrapper{
  font-size: 10pt;
}

Answer 4

您需要在css中使用：host selector：

:host input.md-input-element {
    color: red;
    font-size: 18px;
 }

如何更改material2 md输入占位符字体大小和颜色？

4 个答案: