我正在尝试设计输入的样式,使其具有一定的宽度。我正在使用 Angular Material 2,但由于某种原因,css 中的样式没有应用于输入标签。这是我的问题的一个工作插件 http://plnkr.co/edit/qHbyig0gHtxdquRL63vI?p=preview以及受影响的代码:
@Component({
selector: 'my-app',
template: `
<div>
<form>
<md-input [(ngModel)]="cycleTime" type="number" name="email">
<span md-prefix>Cycle Time:</span>
<span md-suffix> minutes</span>
</md-input>
</form>
</div>
`,
styles:[`
input {
width: 50px;
text-align: right;
}
`],
directives: [MdButton, MdInput]
})
export class AppComponent {
cycleTime = 1
constructor() {}
}
如何设置 Angular Material 2 创建的输入的样式?
您可以尝试覆盖样式MdInput
像这样的组件:
:host input.md-input-element {
width: 50px;
text-align: right;
}
笨蛋的例子 http://plnkr.co/edit/yVcuHuRJASEBj1YwVd1c?p=preview
或者这样:
/deep/ input {
width: 50px !important;
text-align: right;
}
:host-context .md-input-infix input {
width: 50px;
text-align: right;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)