Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Clarification on default outlet styling and how to override without !important

See original GitHub issue

Hi,

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 GitHub Comments

1reaction

waterpleacommented, Dec 24, 2020

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

1reaction

waterpleacommented, Oct 30, 2020

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 😃

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...

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, ......

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...

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...

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...