In einem Angular-Projekt möchte ich viele Tabellen mit einem definierten Stil haben. Also muss ich für jede Tabelle in den Komponenten das CSS für das Tabellen-Styling schreiben.

Nehmen Sie dieses StackBlitz-Beispiel: StackBlitz

Wie Sie sehen können, habe ich eine Mastertabelle mit schwarzem Rand und eine Agententabelle mit rotem Rand, und sie bestehen aus zwei separaten Komponenten. Ich möchte, dass meine Mastertabelle schwarz bleibt, aber die Agententabelle und alle neuen Tabellen, für die ich letztere in anderen Komponenten erstellen werde, hatten beispielsweise einen grünen Rand.

Meine Frage ist also, was ich tun muss, wenn ich einen bestimmten Stil für eine Tabelle und den "globalen" Stil für andere Tabellen verwenden möchte.

Update: Wie funktioniert das auch mit Schaltflächen?

2
Kiril1512 18 Jän. 2019 im 01:50

3 Antworten

Beste Antwort

Sie können beliebige globale Stile in die Datei styles.css in Ihrem Ordner src einfügen. Diese Stile sind für jede Vorlage in Ihrer Anwendung global.

Fügen Sie dann alle eindeutigen Stile einer Komponente in eine CSS-Datei im selben Ordner wie die Komponente ein und verweisen Sie im Dekorator @Component darauf.

@Component({
  selector: 'pm-star',
  templateUrl: './star.component.html',
  styleUrls: ['./star.component.css']
}) 

Im Dekorator @Component definierte Stile werden zur Verwendung mit der Komponente gekapselt.

1
DeborahK 17 Jän. 2019 im 23:30

Wenn Sie beispielsweise beim Stylen eines button einen allgemeinen Stil haben, den Sie auf der gesamten Seite oder auf der Website verwenden möchten, verwenden Sie eine Klasse, anstatt das HTML-Element zu formatieren. Andernfalls müssen Sie diese Stile jederzeit überschreiben, wenn Sie sie nicht verwenden möchten. Auf diese Weise können Sie Ihre Stile einfach erweitern, sodass eine Schaltfläche die Stile erben und Änderungen vornehmen kann. Beachten Sie, wie .button-extended die :hover Stile von .button erbt. Wenn Sie die Klasse anstelle des Elements formatieren, können Sie sie für jedes HTML-Element verwenden, anstatt auf eines beschränkt zu sein. Ich empfehle Ihnen auch, sich mit dem Erlernen von SASS (SCSS) zu befassen. Dies ist ein Beispiel für HTML und CSS:

.button
{
    display: inline-block;
    width: auto;
    background: #000;
    color: #fff;
    border: solid #39f;
    border-radius: 5px;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    margin-bottom: 0.5em;
}
    .button:hover
    {
        background: #fff;
        color: #000;
    }

.button-specific
{
    display: inline-block;
    background: #fff;
    color: #000;
    border: solid;
    border-radius: 5px;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    margin-bottom: 0.5em;
}
    .button-specific:hover
    {
        color: #39f;
        background: #000;
    }

.button-extended
{
    display: block;
    border: solid #ff0000;
    text-transform: uppercase;
    padding: 2em;
    background: #ccc;
}
<a href="#" class="button">.button</a>
<br>
<a href="#" class="button-specific">.button-specific</a>
<br>
<a href="#" class="button button-extended">.button, .button-extended</a>
1
Remote 17 Jän. 2019 im 23:19

Angenommen, Sie haben zwei CSS-Dateien, eine für globale und eine für die spezifische Komponente, und Sie möchten nur eine Schaltfläche oder eine Tabelle usw. formatieren.

global.css

.styledbutton { background-color : Red }

component.css

.styledbutton { background-color : green !important }

Verknüpfen Sie die globale CSS-Datei mit Ihrer gesamten Komponente und dem spezifischen CSS in der Komponente wie

@Component({
   selector: 'component',
   templateUrl: 'component.html',
   styleUrls: ['global.css', 'component.css']
})

Wenn Sie das gesamte CSS aus der Datei component.css löschen, erhält die Schaltfläche die Datei global.css. Andernfalls wird das CSS überschrieben

Hoffe das hilft

1
Seyhmus Gokcen 17 Jän. 2019 im 23:47