Angular/Material 中的样式 mat-form-field 输入 [英] Styling mat-form-field input in Angular/Material

问题描述

我有一个带有输入的 mat-form-field，我想向其中添加自定义样式，但是我在官方 Angular Material 网站上找不到任何相关文档.

I have a mat-form-field with input that I am wanting to add a custom style to, however I cannot find any documentation regarding this on the official Angular Material website.

我的最终目标是:

• 选择输入框后更改下划线颜色
• 移除浮动标签(如果可能 - 我知道这是一项功能，但现在已弃用).

我目前还不是最擅长 Angular，但如果 JS 中的事情需要改变，那么我总是可以尽我所能.

I'm not the most adept with Angular just yet, but if things need changing in JS, then I can always give it my best shot.

我只需要一点指导.

当前代码:

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

当前的 CSS:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}

推荐答案

据我了解，这两个功能似乎都在 MatFormField 中.

From my understanding, both features seem to be in MatFormField.

1. floatPlaceholder 已被弃用，因为现在它是 [floatLabel] for FloatLabelType ('never', 'always', 'auto')，使用输入应用
2. 您可以使用输入 [color] 更改下划线的颜色，但是您只能从主题中选择颜色('primary'、'accent'、'warn').有关如何设置主题的更多信息，请访问他们的网站、

1. floatPlaceholder is deprecated, because now it's [floatLabel] for FloatLabelType ('never', 'always', 'auto'), applied using input
2. You can change the color of the underline with input [color], however you can only select colors from your theme ('primary', 'accent', 'warn'). For more on how to setup the theme go to their website here,

<form class="search-form">
  <mat-form-field class="example-full-width"
                  floatLabel="never" color="primary">
    <input class="toolbar-search" type="text" matInput placeholder="search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

这篇关于Angular/Material 中的样式 mat-form-field 输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！