使用角形材料2的输入上的自定义样式 [英] Custom styles on inputs with angular material 2
本文介绍了使用角形材料2的输入上的自定义样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试设置输入的样式,使其具有一定的宽度.我正在使用Angular Material 2,但由于某些原因,css中的样式未应用于输入标签. 这是我遇到的问题的解决方法以及受影响的代码:
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> 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创建的输入的样式?
How can I style the input that is being created by Angular Material 2?
推荐答案
您可以尝试覆盖MdInput
组件的样式,如下所示:
You can try to override styles of MdInput
component like this:
:host input.md-input-element {
width: 50px;
text-align: right;
}
或者这样:
/deep/ input {
width: 50px !important;
text-align: right;
}
:host-context .md-input-infix input {
width: 50px;
text-align: right;
}
这篇关于使用角形材料2的输入上的自定义样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文