未应用 Angular 2 样式网址

Question

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

如果 css 有效，那么图像将调整为 250px，p标签字体大小将为 50px 。但两者都会发生

附上我的 Plunkr

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

应用.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>

应用.css

.carousel-slider {
  height: 100vh;
}
.slider-profile-pic {
  width: 250px;
}
.slider-text {
  font-size: 50px;
}

应用程序

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;
}