कोणीय सामग्री के साथ इनपुट पर कस्टम शैलियों 2

Question

मैं एक इनपुट शैली बनाने की कोशिश कर रहा हूं ताकि यह एक निश्चित चौड़ाई हो। मैं कोणीय सामग्री 2 का उपयोग कर रहा हूं लेकिन कुछ कारणों से सीएसएस में शैलियों को इनपुट टैग पर लागू नहीं किया जा रहा है। Here is a working plunker of my issue प्रभावित कोड के साथ:

@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() {} 
} 

मैं कैसे इनपुट है कि कोणीय सामग्री 2 द्वारा बनाई जा रही शैली दे सकते हैं?

Answer 1

आप इस तरह MdInput घटक के शैलियों को ओवरराइड करने की कोशिश कर सकते हैं:

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

Plunker example

या इस तरह से:

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

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