Style in angular6 component CSS file does not work

Question

I am using angular6 . I have included a bootstrap.css file in the src folder. Then in my angular.json I include all the css files that I want

"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"] these are styles for : openlayers, bootstrap, the angular's default styles.css , geocoder module, and font-awesome. This works fine.

I put the CSS styles for general DOM elemets (header, headers etc) in the styles.css so they are available everywhere. This works fine.

Then I thought to include more component-specific styles to the component.css files. But this does not work. If I put, for example

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

in the styles.css , this works fine. If I put it in the profile.component.css , it does not work . The component is set like

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

Is it something with to do with shadow DOM or View Encapsulation? What am I missing here?

Thanks

Answer 1

Please first confirm, Is another CSS code working in your component or not?

If another css is working then you have to mark all the properties to important into your component.css file as follows:

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

Hope this will help you!