Общий CSS и конкретный CSS

Question

Я не знаю, как я могу использовать некоторые общие CSS в моем проекте. Все, что я хочу, это иметь файл CSS, чтобы все мои компоненты были одинаковыми, поэтому, если я изменю свой цвет таблицы, он изменится во всех моих компонентах, в которых есть таблица, но не изменится, если у меня есть определенный файл CSS для этого компонента. , Например, у меня есть этот код stackBlitz:

Пример StackBlitz

Как вы видите, у меня есть мастер-таблица с черной рамкой, а таблица агента с красной рамкой, ведьма-агент и мастер - это два отдельных компонента. Я хочу, например, чтобы моя основная таблица продолжала оставаться черной, но таблица агента и все новые таблицы, которые я создам в других компонентах, имели, например, зеленую рамку.

Как я могу это сделать?

PS: поэтому, если я сделаю то, что хочу, я, например, изменю все цвета кнопок в моем приложении, просто изменив один файл CSS, а если мне нужен определенный цвет кнопки, я изменю компонент css.

Answer 1

Вы можете поместить любые нужные вам глобальные стили в файл styles.css в папку src. Эти стили являются общими для каждого шаблона в вашем приложении.

Затем поместите любые уникальные стили любого компонента в файл css в той же папке, что и компонент, и укажите его в декораторе @Component.

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

Стили, определенные в декораторе @Component, инкапсулированы для использования с компонентом.

Answer 2

Допустим, у вас есть два файла CSS, один для глобального и другой для конкретного компонента, и вы просто хотите стилизовать кнопку или таблицу и т. Д.

global.css

.styledbutton { background-color : Red }

component.css

.styledbutton { background-color : green !important }

Свяжите глобальный файл CSS со всеми вашими компонентами и конкретным CSS вместе в компоненте, например

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

Если вы удалите все css из component.css, кнопка получит global.css, а если нет - переопределит css

Надеюсь, это поможет

Answer 3

Например, при стилизации button, если у вас есть общий стиль, который вы хотели бы использовать для всей страницы или сайта, используйте класс, а не стилизуйте элемент HTML. Иначе вам придется переопределять эти стили всякий раз, когда вы не хотите их использовать. Таким образом, вы можете легко расширить ваши стили, чтобы кнопка могла наследовать стили и иметь изменения. Обратите внимание, как .button-extended наследует стили :hover от .button. Стилизуя класс, а не элемент, вы можете использовать его для любого элемента HTML, а не ограничиваться одним. Я также рекомендую вам изучить SASS (SCSS). Это пример HTML и 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>