带有角度材料 2 的输入的自定义样式 [英] Custom styles on inputs with angular material 2

问题描述

我正在尝试为输入设置样式，使其具有特定的宽度.我正在使用 Angular Material 2，但由于某种原因，css 中的样式没有应用于输入标签.这是我的问题的一个有效工作以及受影响的代码:

@Component({选择器:'我的应用'，模板:`<div><表格><md-input [(ngModel)]="cycleTime" type="number" name="email"><span md-prefix>循环时间:</span><span md-suffix>&nbsp;分钟</span></md-input></表单>

`，样式:[`输入 {宽度:50px；文本对齐:右；}`]，指令:[MdButton, MdInput]})导出类 AppComponent {周期时间 = 1构造函数(){}}

如何为 Angular Material 2 创建的输入设置样式?

解决方案

您可以尝试像这样覆盖 MdInput 组件的样式:

:host input.md-input-element {宽度:50px；文本对齐:右；}

Plunker 示例

或者这样:

/deep/input {宽度:50px！重要；文本对齐:右；}:host-context .md-input-infix 输入 {宽度:50px；文本对齐:右；}

I am trying to style an input so that it is a certain width. I am using Angular Material 2 but for some reason the styles in the css isn't being applied to the input tag. Here is a working plunker of my issue along with the affected code:

@Component({
  selector: 'my-app',
  template: `
  <div>
    <form>
      <md-input [(ngModel)]="cycleTime" type="number" name="email">
        <span md-prefix>Cycle Time:</span>
        <span md-suffix>&nbsp;minutes</span>
      </md-input>
    </form>
  </div>
  `,
  styles:[`
      input {
        width: 50px;
        text-align: right;
      }
    `],
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  cycleTime = 1

  constructor() {}
}

How can I style the input that is being created by Angular Material 2?

解决方案

You can try to override styles of MdInput component like this:

:host input.md-input-element {
  width: 50px;
  text-align: right;
}

Plunker example

Or this way:

/deep/ input {
  width: 50px !important;
  text-align: right;
}

:host-context .md-input-infix input {
  width: 50px;
  text-align: right;
}

这篇关于带有角度材料 2 的输入的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！