css - angular6 组件 CSS 文件中的样式不起作用

Question

我正在使用 angular6 。我在 src 文件夹中包含了一个 bootstrap.css 文件。然后在我的 angular.json 中包含我想要的所有 css 文件

"styles": ["../node_modules/ol/ol.css", "src/bootstrap.min.css", "src/styles.css", "../node_modules/ol- geocoder/dist/ol-geocoder.min.css", "node_modules/font-awesome/css/font-awesome.css"]这些样式适用于:openlayers、bootstrap、angular 的默认 styles.css、geocoder 模块和 font-awesome。这很好用。

我将一般 DOM 元素( header 、 header 等)的 CSS 样式放在 styles.css 中，以便它们随处可用。这很好用。

然后我想在 component.css 文件中包含更多特定于组件的样式。但这不起作用。如果我把，例如

.accordion .card:first-of-type form{
  display: block;
  width: 75%;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

在 styles.css 中，这工作正常。如果我把它放在 profile.component.css 中，它就不起作用。组件设置为

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})

是不是和shadow DOM或者View Encapsulation有关？我在这里错过了什么？

谢谢

Answer 1

请先确认，您的组件中是否有其他 CSS 代码在工作？

如果另一个 css 正在工作，那么您必须将所有重要的属性标记到您的 component.css 文件中，如下所示:

.accordion .card:first-of-type form {
   display: block !important;
   width: 75% !important;
   clear: both!important;
   margin-left: auto!important;
   margin-right: auto!important;
}

希望对您有所帮助!