Clarification on default outlet styling and how to override without !important
See original GitHub issueHi,
First of all, I love this idea. It makes customisation so much more future-proof. Although the idea is a bit hard to grasp at first, it’s really powerful.
I have a question regarding styling. Why is the default styling of the outlet :host { display: block; }
? I want my outlet to be inline. I now have to override this with !important
because I’m using global styling to style this component. Why can’t it just be the default of unset
?
Here is my example, note the !important
I have to apply. FYI: I want my styling to be global so it can be customised using SASS variables (this component can be part of a component lib distributed via npm).
Hope to hear from you!
Kind regards, Joep Kockelkorn
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
css - Overriding styles without !important - Stack Overflow
It depends. CSS stands for Cascading Style Sheets, and there's a specific order that styles are applied in, overwriting previous styles. Without going...
Read more >CSS !important: Don't Use It. Do This Instead - UX Engineer
The source order rule is our “weakest” option to override styles. If you're stuck trying to understand why you're styles aren't being applied, ......
Read more >How to Override CSS Styles - W3docs
When an important rule is used on a style declaration, this declaration will override any other declarations. When two conflicting declarations with the...
Read more >Styling - Remix
Styling. The primary way to style in Remix (and the web) is to add a <link rel="stylesheet"> to the page. In Remix, you...
Read more >Angular :host, :host-context, ::ng-deep - The Complete Guide
In this post, we will learn how the default Angular styling ... that the styles of the component will (most likely) not be...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Went with number 1 and removed component selector along with default style. Also bumped Angular to v.9 and released it as 3.0.0
For the first case schematic should replace all usages of
<polymorpheus-outlet
tag selector with<div polymorpheus-outlet
rather. And closing</polymorpheus-outlet>
with</div>
. Might save a few bytes for the folks 😃