Question

我正在使用angular6。我在bootstrap.css文件夹中包含一个src文件。然后在我的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，地理编码器模块和超棒的字体。效果很好。

我在styles.css中放置了通用DOM元素（标题，标题等）的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']
})

与影子DOM或视图封装有关吗？我在这里想念什么？

谢谢

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

希望这对您有帮助！

Answer 2

尝试使用ng-deep。 deep可以访问DOM元素，而这些元素不在组件的HTML中。例如，如果您使用Telerik组件或Angular Material，则无法使用常规CSS方法应用CSS。

::ng-deep .accordion .card:first-of-type form {
  /* styles here */
}

angular6组件CSS文件中的样式无效

2 个答案: