Angular - styles globaux css et composants css

Question

Dans un projet Angular, je veux avoir plusieurs tableaux avec un style défini. Ainsi, pour chaque table dans les composants, je dois écrire le css pour le style de la table.

Prenez cet exemple de StackBlitz : StackBlitz

Comme vous pouvez le voir, j'ai un tableau principal avec une bordure noire, et un tableau d'agents avec une bordure rouge, et ils sont dans deux composants séparés. Je veux que ma table principale reste noire, mais que la table agent, et toutes les nouvelles tables que je créerai plus tard dans d'autres composants aient par exemple une bordure verte.

Ma question est donc la suivante : que dois-je faire si je veux utiliser un style spécifique pour un tableau et utiliser le style "global" pour les autres tableaux ?

Mise à jour : comment cela fonctionne-t-il aussi avec les boutons ?

Answer 1

Vous pouvez placer tous les styles globaux que vous voulez dans la section styles.css dans votre src dossier. Ces styles sont globaux pour tous les modèles de votre application.

Ensuite, placez tous les styles propres au composant dans un fichier css situé dans le même dossier que le composant et faites-y référence dans le fichier @Component décorateur.

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

Les styles définis dans le @Component sont encapsulés pour être utilisés avec le composant.

Answer 2

Disons que vous avez deux fichiers css, l'un pour le global et l'autre pour le composant spécifique, et que vous voulez juste styliser un bouton ou un tableau, etc.

global.css

.styledbutton { background-color : Red }

composant.css

.styledbutton { background-color : green !important }

Liez le fichier css global à tous vos composants et le fichier css spécifique dans le composant comme suit

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

Si vous supprimez toutes les css du component.css, le bouton obtiendra la global.css, sinon il prendra les css superflues.

J'espère que cela vous aidera

Answer 3

Par exemple, lors de l'élaboration d'un button Si vous avez un style général que vous souhaitez utiliser sur l'ensemble de la page ou du site, utilisez une classe, plutôt que de styliser l'élément HTML. Sinon, vous devrez remplacer ces styles chaque fois que vous ne voudrez pas les utiliser. De cette façon, vous pouvez facilement étendre vos styles afin qu'un bouton puisse hériter des styles et être modifié. Remarquez comment .button-extended hérite de la :hover des styles de .button . En donnant un style à la classe plutôt qu'à l'élément, vous êtes libre de l'utiliser sur n'importe quel élément HTML, plutôt que d'être limité à un seul. Je vous recommande également de chercher à apprendre SASS (SCSS). Voici un exemple de HTML et de 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>