Применение общих стилей в angular

Question

У меня есть стили, общие для двух компонентов в моем angular приложении. В настоящее время они применяются в файлах s css отдельных компонентов. У меня есть файл root s css с именем styles.s css

Как лучше всего сделать стили общими

Общие стили:

h2 {
  margin-left: 15px;
}

form {
  margin: 15px;

  label {
    display: block;
  }

  input, select, button {
    display: block;
    width: 250px;
    margin-bottom: 15px;
  }

  small {
    color: red;
    margin-top: -12px;
    margin-bottom: 15px;
    display: block;
  }
}

table {
  margin: 15px;
  border-collapse: collapse;

  th, td {
    border: 1px solid #ddd;
    padding: 5px;
    min-width: 100px;
    text-align: left;
  }

  th {
    background-color: #ddd;
  }
}

Answer 1

В основном есть два способа добиться этого -

1. Вы можете добавить свой общий код CSS в глобальный файл CSS, как вы упомянули в stlyes.css, который существует на уровень Root, как правило, все общие / общие стили, которые должны быть записаны на нем, которые используются в нескольких компонентах.

2. Создание модуля style.css файла и styleUrls свойства в метаданные компонента принимают массив файлов, поэтому вы также можете упомянуть там.

Answer 2

Если вы не хотите создавать оболочку для уже разработанных компонентов, вы можете go простым способом, используя селекторы компонентов в качестве оболочки в styles.s css

app-component-one, app-component-two {
  h2 {
    color: blue;
  }
}

Это гарантирует, что стили компонента не растекаются. Также компоненты могут иметь свои собственные стили в собственных файлах css.

Answer 3

Styles.scss - это общий файл стилей для повторного использования css, просто добавьте все общие стили в styles.css под любым именем класса, скажем, componentStyle.

Стили. css

componentStyle{
// all common styles in here
}

затем в компонентах добавьте componentStyle к родительскому div обоих компонентов

ComponentA. html

<div class="componentStyle">
this is component A
<div>

Компонент B. html

<div class="componentStyle">
this is component B
<div>