2
votes

Angular - styles globaux CSS et composant CSS

Dans un projet Angular, je souhaite avoir de nombreuses tables avec un style défini. Donc, pour chaque table des composants, j'ai besoin d'écrire le css pour le style du tableau.

Prenons cet exemple de StackBlitz: StackBlitz

Comme vous pouvez le voir, j'ai une table principale avec une bordure noire et une table d'agent avec une bordure rouge, et elles sont dans deux composants séparés. Je veux que ma table principale continue en noir, mais la table d'agent, et toute nouvelle table sur laquelle je vais créer cette dernière dans d'autres composants avaient par exemple une bordure verte.

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

Mise à jour: comment cela fonctionne également avec les boutons?

angular html css styles

2 commentaires

Veuillez publier votre code dans la question elle-même, dans un exemple minimal, complet et vérifiable .

Plutôt que de styliser tous les boutons, il est préférable de styliser une classe et de l'utiliser ensuite pour tous les boutons que vous souhaitez styliser avec ce style par défaut. Sinon, vous devrez remplacer les styles chaque fois que vous souhaitez changer quelque chose. Cela a-t-il du sens?

3 Réponses :

1
votes

Par exemple, lorsque vous stylisez un bouton , si vous souhaitez utiliser un style général sur la page ou le site, utilisez une classe plutôt que de styliser l'élément HTML. Sinon, vous devrez remplacer ces styles chaque fois que vous ne souhaitez pas les utiliser. De cette façon, vous pouvez facilement étendre vos styles afin qu'un bouton puisse hériter des styles et subir des modifications. Remarquez comment .button-extended hérite des styles : hover de .button . En stylisant la classe plutôt que 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 vous pencher sur l'apprentissage du SASS (SCSS). Voici un exemple du HTML et du CSS:

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

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

0 commentaires

2
votes

Vous pouvez placer tous les styles globaux de votre choix dans le fichier styles.css dans votre dossier src . Ces styles sont globaux pour chaque modèle de votre application.

Ensuite, placez tous les styles uniques de composant dans un fichier css dans le même dossier que le composant et référencez-le dans le décorateur @Component . P >

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

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

0 commentaires

2
votes

Supposons que vous ayez deux fichiers css, un pour global et l'autre pour le composant spécifique et que vous vouliez juste styliser un bouton ou une table, etc.

global.css

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

.styledbutton { background-color : green !important }

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

.styledbutton { background-color : Red }

Si vous supprimez tous les css du composant.css, le bouton obtiendra le global.css et sinon il prendra le remplacement du css

J'espère que cela vous aidera

0 commentaires