Angular 2 styleUrls 未应用

Question

我开始学习 Angular 2。在为组件使用外部 css 时遇到问题。
当我在 html 标记本身中对样式进行硬编码时，它可以正常工作。但是使用styleUrls通过外部css加载时不会应用css

如果 css 正常工作，那么图像将调整为 250 像素，p 标签字体大小将是 50 像素。但两者都会发生

附加我的 Plunkr

https://plnkr.co/edit/j1GrrI5NMHSXqgdgECH4?p=preview

app.html

<div class="carousel carousel-slider center" data-indicators="true">
  <div class="carousel-fixed-item center">
    <a class="btn waves-effect white grey-text darken-text-2">Skip To Site</a>
  </div>
  <div class="carousel-item accent-color white-text" href="#one!">
    <div class="row">
      <img src="http://materializecss.com/images/yuna.jpg" alt="Profile Pic" class="circle responsive-img slider-profile-pic">
    </div>
    <p class="slider-text white-text">Hello There</p>
    <p class="slider-text white-text">Welcome To My Website</p>
  </div>
  <div class="carousel-item accent-color white-text" href="#two!">
    <p class="slider-text white-text">Second Panel</p>
    <p class="slider-text white-text">This is your second panel</p>
  </div>
  <div class="carousel-item accent-color white-text" href="#three!">
    <p class="slider-text white-text">Third Panel</p>
    <p class="white-text">This is your third panel</p>
  </div>
  <div class="carousel-item accent-color white-text" href="#four!">
    <p class="slider-text white-text">Fourth Panel</p>
    <p class="slider-text white-text">This is your fourth panel</p>
  </div>
</div>

app.css

.carousel-slider {
  height: 100vh;
}

.slider-profile-pic {
  width: 250px;
}

.slider-text {
  font-size: 50px;
}

app.ts

import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

declare var $: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.html',
  styleUrls: ['./app.css']
})
export class App implements OnInit {
  name:string;
  constructor() {
    this.name = 'Angular2'

  }

  ngOnInit(): void {
    $('.carousel.carousel-slider').carousel({ fullWidth: true });
  }

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

由于轮播的 css，您的 css 未应用。

轮播图像的 css 选择器是 .carousel .carousel-item img，而您的 css 选择器是 .slider-profile-pic。您的 css 选择器不太具体，因此应用了轮播的 css。

你可以用!important强制你的CSS：

.slider-profile-pic {
  width: 250px !important;
}

.slider-text {
  font-size: 50px !important;
}