Angular2 Material2 요소 스타일 지정 방법

Question

내 scss 중 일부가 angular-material2 요소와 올바르게 작동하지 않는 이유가 궁금합니다. 내 scss를 컴파일하기 위해 node-sass를 사용하고 있으며 CSS 파일에 올바르게 영향을주지 않는 것 같습니다.

.demo-sidenav-layout { 
    md-sidenav { 
     background-color: $left_nav; 
     padding: 10px; 
    } 
} 

(나는 배경 색상을 추가) : 예를 들어 나는 이것을 가지고 Material2에 데모 응용 프로그램을 사용하고 있습니다. 이것은 요소를 스타일링하는 올바른 방법인가요? 아니면 그냥 클래스를 사용해야합니까? 원하는 배경색으로 클래스를 추가 할 때 기본 요소 스타일로 덮어 씁니다.

Answer 1

소재 2는 코어의 요소에 대한 테마 기반을 사용합니다. Sass와 mixins를 사용하여 스타일을 수정하거나 앱에 맞는 테마를 정의 할 수 있습니다. 이 사용 방법은 다음과 같습니다

첫째, 공식 문서를 사용하여 테마를 만들 :

• https://material.angular.io/guide/theming

둘째, 선택한 구성 요소의 믹스 인을 만들 :

이것을 완료하는 방법은 쉽습니다.

• my_component_styleded.component.html
• my_component_styleded.component.html.scss
• my_component_styleded.component.spec : 당신은 예를 들어,

  ng g c components/my_component_styleded 
  

  이 만드는 4 개 파일을 새로운 구성 요소를 생성한다 .ts

• my_component_styleded.component.html.ts

* .scss에는 구성 요소 (구조체 스타일)의 일반 스타일이 포함되고 * .html 파일에는 yout 구성 요소의 HTML 구조가 포함됩니다. 예를 들어 는 :

<div> 
<button md-raised-button routerLink="/stock">STOCK OF PRODUCTS</button> 
</div> 

지금,라는 새로운 파일을 생성 : 'my_component_styleded.component.html.scss-theme.scss'디렉토리에, 그리고 버튼 요소를 개인에 대한 추적 코드와 함께 믹스 인을 사용 :

@import '~@angular/material/theming'; 
@mixin my_component_styleded-theme($theme) { 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 

    div { 
    button { 
     color: $accent; 
     &:hover, &:focus { 
      color: $primary; 
      border-left: 5px solid mat-color($accent); 
      } 
     } 
    } 
} 

다른 변수를 Sass와 다른 것으로 선언 할 수 있습니다.

마지막으로, 당신은 앱의 주요 style.scss이 믹스 인을 추가해야합니다 : - style.scss -

@import '~@angular/material/theming'; 
@include mat-core(); 

// Custom component themes: 
@import 'app/components/my_component_styleded/my_component_styleded.component.scss-theme'; 
@mixin custom_component-theme($asis-light-theme) { 
    @include my_component_styleded-theme($asis-light-theme); 
} 

// Light Theme 
@include angular-material-theme($asis-light-theme); 
@include custom-component-theme($asis-light-theme); 

)