发表新帖
发表新帖

Override Angular Material style in Angular component

前端 未结
关注
6 1014
日久生厌
日久生厌 2021-01-11 14:27

I am using Material 2 in my Angular component. I want to override one of the classes e.g. .mat-input-wrapper defined in

相关标签:
6条回答
  • 慢半拍i
    2021-01-11 14:34

    The easiest approach I would suggest for SCSS is:

    1. You can copy the class name of property and override it in style.scss so it will work.

    2. Create a @mixin in new SCSS file and override all properties u want. then import this @mixin in style.scss. It is more cleaner approach.

    EDIT: More easy and clear way to override the default css for particular component only:

    1. Open index.html and assign one unique attribute to body, as I have added override

      <body override>
 <app-root>
    <loading-screen></loading-screen>
 </app-root>
</body>

    2. Suppose you want to override a <md-input-container> css properties for Employee component which has selector app-employee.

    3. Open style.css and create override css like below.

      [override] app-employee .mat-input-container {
// add your custom CSS properties 
// this will apply only a particular component 
}

    4. Run and Enjoy

    0 讨论(0)
  • 太阳男子
    2021-01-11 14:39

    There's no need to wrap with <div class="someCssClassName">. Rather, to style an Angular Material element like the title of a card..

    <mat-card>
   <mat-card-title>
      {{title}}
   </mat-card-title>
</mat-card>

    CSS:

    mat-card mat-card-title {
   color: red;
}

    Applying this to another 'child' element like <mat-card-content>

    mat-card mat-card-content,
mat-card mat-card-title {
   color: red;
}

    Using VS Code, hovering in the CSS editor will reveal detail of how this CSS will render. In this example, <mat-card>...<mat-card-title>

    Of course, if you have multiple uses of the card in a single component, then you will need to make the distinction with a CSS class name adding the class="card-style-1" to the element itself, like <mat-card class="card-style-1".

    CSS:

    mat-card.card-style-1 mat-card-content,
mat-card.card-style-1 mat-card-title {
   color: red;
}

    The alternative to this is to create individual components specific to the uses of different cards, styling each as required.

    0 讨论(0)
  • 广开言路
    2021-01-11 14:41

    The preferred solution probably would be to define the styles in your own Material theming style sheet. The use of /deep/ is deprecated (Angular V 4.3): https://angular.io/guide/component-styles#special-selectors

    You can now use ::ng-deep at as an alternative to defining your own theming style sheet.

    However, using the ::ng-deep can influence the use Material icons negatively again when using it to override a default font family (as Material Icons is a font-family as well)

    0 讨论(0)
  • 野性不改
    2021-01-11 14:48

    The problem with ::ng-deep is, it will apply the style across all the pages and all the components. Meaning its a dirty approach. A better way to do this, is to wrap with a custom class and style the element in your styles.scss/styles.css

    Example: As asked in the question. To override a .mat-input-wrapper, wrap your element with your custom class like:

    <md-input-container class='big-input'>. Then in

    styles.scss:

    .big-input .mat-input-wrapper {
   height : 200px;
}

    add !important if necessary.

    0 讨论(0)
  • 抹茶落季
    2021-01-11 14:49

    As @Dylan pointed out, you have to use /deep/ to alter the CSS within the child compoenets. Here is the answer I was looking for:

    :host /deep/ md-input-container .mat-input-wrapper

    0 讨论(0)
  • 闹比i
    2021-01-11 14:55

    If you are using SCSS try ::ng-deep 

    ::ng-deep { 
       .sample {
         // style
         color: green;
       }
    }
    0 讨论(0)
 看不清?
提交回复
热议问题