Question

我开始学习Angular 2.我在使用extenal css for Components时遇到了问题当我在html标签本身硬编码样式时，它工作正常。但是使用styleUrls

通过外部css加载时不会应用css

如果css工作，那么图像将调整为250px，p标签的字体大小将为50px。但两种情况都会发生

附上我的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选择器不太具体，因此应用了carousel的css。

您可以使用!important：

强制使用css

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

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

Angular 2 styleUrls未应用

1 个答案: