CODEWITHSUNDEEP
cssangular
Nepal Reddy
Nepal Reddy

Reputation: 13

CSS styles not working on already existing component/body tag

I have a project in angular 7, I am loading a component dynamically using routes, in dynamically loaded component style-sheet I am adding some styles for body tag and already existing component tags and they're not reflecting in DOM.

body {
padding-bottom: 150px;
}

Styles are coming in the dynamically loaded component style-sheet, but I don't see them applying on DOM elements.

Upvotes: 1

Views: 1171

Answers (2)

Ben Racicot
Ben Racicot

Reputation: 5915

If you're defining styles within a component they will not apply outside of the component.

Check out my StackBlitz template.

  1. My global styles are defined in a scss/ folder to apply all global styles downwards into the DOM.

  2. Component styles are then only used to override global styles or for component specific styles used no where else in my project.

This is how I set up my Angular styles. Let me know if you need more help.

Upvotes: 0

Dennis
Dennis

Reputation: 391

By default angular only applies the styles within a component, only to HTML elements within that components template (view encapsulation). To override this behaviour you can set an option in the components directive.

For more info see https://angular.io/guide/component-styles#view-encapsulation

Upvotes: 1

Related Questions