Überschreiben der CSS gekapselt von externen Komponente

Ich Frage mich, wie das überschreiben der gekapselten CSS von einer externen Komponente.

So, ich bin mit material2 in mein Projekt und die tabs-Komponente hat ein Attribut overflow set auf tab-body. Ist es möglich, das überschreiben der überlauf-Wert?

Ja. Erstellen Sie ein CSS-Selektor mit einer höheren Spezifität als die Anwendung der überlauf.
aber das wird nicht außer Kraft gesetzt, dass das erzeugte element wird haben Sie immer noch styling

InformationsquelleAutor Salma Hamed | 2016-10-21

  1. 19

    Können Sie die spezielle css - /deep/ Unterricht. Finden Sie in der Dokumentation

    So, wenn Sie

    app
  sub-component
    target-component
      <div class="target-class">...</div>

    Können Sie Ihre apps css (oder weniger):

    /deep/ .target-class {
  width: 20px;
  background: #ff0000;
}

    Natürlich können Sie dieses css-fragment in sub-component als gut.

    Die /deep/ ist veraltet und unterstützt wird, entfernt von den wichtigen Browsern. Siehe die Winkel-Dokumentation. Also ich würde empfehlen zu schreiben, in CSS eine Klasse mit dem gleichen Namen target-class und markieren Sie die überschriebenen Eigenschaften mit dem !wichtig - Attribut.
    Es hat nicht funktioniert für mich mit wichtig!
    als Faustregel gilt, sollten Sie CSS-Spezifität zu überschreiben früheren Erklärungen und verwenden Sie das !wichtig - Attribut als letztes Mittel (es wurde schon genutzt). In den Fällen, wenn Sie brauchen, um das überschreiben der !important verwenden Sie eine Kombination von CSS-Spezifität und !important.
    Es funktioniert nicht, selbst mit einem (scheinbar) größere Spezifität.

    InformationsquelleAutor Meir

  2. 1

    Einfach die Klasse, das angewendet wird, um die Registerkarten, indem Sie die externe Komponente (verwenden Inspektor oder einem anderen tool). In deiner style css-Datei, fügen Sie die gleichen Namen der Klasse für die Registerkarten und legen Sie die overflow-Eigenschaft zusammen mit hinzufügen !wichtig, um sicherzustellen, dass es überschreibt die Vorherige. Auch stellen Sie sicher, dass Ihr css-link zu der Seite Hinzugefügt wird, nachdem die externe Komponente css-link falls vorhanden.

    Hoffe, das hilft.

    InformationsquelleAutor Nasir T

  3. 0

    Aus diesem Artikel

    Obwohl der Stil einer Komponente ist gut isoliert sind, kann es immer noch leicht außer Kraft gesetzt, wenn nötig. Dafür brauchen wir nur, um ein Attribut hinzuzufügen, um den Körper von der Seite:

    <body override>
    <app></app>
</body>

    Den Namen des Attributs kann alles sein. Kein Wert benötigt wird, und den Namen überschreiben, macht es offensichtlich, was Ihr dafür verwendet. Zum überschreiben der Komponente styles, wir können dann Folgendes tun:

    [override] hello-world h1 {
    color:red;
}

    Überschreiben, wo ist das Attribut, das Hallo-Welt-ist die Ziel-Komponente, und h1 ist, was Sie versuchen, zu restyle. (dies richtig oder es wird nicht funktionieren).

    Ihre Komponente hello-world wäre 

    selector: 'hello-world',
styles: [`
   h1 {
      color: blue;
   }
`],
template: ` <h1>Hello world</h1> `

    Ich denke, dies ist der eleganteste Weg.

    Alternativ, wenn Sie den Aufbau einer Bibliothek von einigen Sortieren, können Sie Sie zurücksetzen, das styling insgesamt mit etwas Phantasie in deine css wie:


    :host-context(.custom-styles) {
    //.. css here will only apply when there is a css class custom-styles in any parent elem
    }

    Also dann zu verwenden, die Komponente, die Sie verwenden würden


    <hello-world class="custom-styles">

    Aber das ist weit weniger bequem, als die erste option.

    InformationsquelleAutor Ced

Schreibe einen Kommentar