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

Can you share you html file too? Just to be sure that is nothing there. — Thomaz Capra
– Thomaz Capra, Commented Jan 7, 2019 at 18:28
Sharing your code would be helpful to solve the issue. I have replicated your issue and it's working fine in both the cases i.e putting it in styles.css and also putting all the styles in their respective component. So I'm assuming there is something wrong with the code — ark
– ark, Commented Jan 7, 2019 at 18:37
Have you tried to put :host ::ng-deep before .accordion .card:first-of-type form ? It overrides every attribute you are setting up. — Victor Henrique
– Victor Henrique, Commented Jan 7, 2019 at 18:57
I think Victor is right. To add some explanation: Because the accordion is a different component, your styles will not apply unless ::ng-deep is added — Benjamin Kindle
– Benjamin Kindle, Commented Jan 8, 2019 at 1:58

Prashant Pimpale · Accepted Answer · 2019-01-09 13:32:28Z

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!

Collectives™ on Stack Overflow

Style in angular6 component CSS file does not work

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related