Проблема:
У меня угловое приложение с множеством компонентов и подкомпонентов.Они были сгенерированы с помощью ng generate component <component-name>, поэтому каждый из них имеет один и тот же стиль тега компонента:
@Component({
selector: 'app-<component-name>',
templateUrl: './<component-name>.component.html',
styleUrls: ['./<component-name>.component.css']
})
Насколько я понимаю, весь CSS, связанный с этим компонентом, должен быть помещен в src/<component-name>/<component-name>.component.css и должен применяться автоматическик компоненту, когда он отображается.
Однако, похоже, это не так, поскольку, когда я помещаю определенные инструкции в этот файл CSS, они, по-видимому, игнорируются.Самыми известными на данный момент нарушителями являются такие вещи, как text-align и любой вид тега color, в то время как такие теги, как font-family или vw / vh, прекрасно работают.
Вкл.с другой стороны, когда я помещаю свой CSS в файл типа src/styles.css и помещаю импорт в index.html для этого файла, любой имеющийся там CSS применяется правильно, но применяется ко ВСЕМ компонентам.Это не будет проблемой, за исключением того, что некоторые компоненты обязательно совместно используют соглашения об именах, и я не могу указать, что я имею в виду не [col-id="car"] в table2.component.ts, а скорее [col-id="car"] в table5.component.ts.
РЕДАКТИРОВАТЬ:
Вот пример того, о чем я говорю:
Моя текущая сетка выглядит так:
Все ячейки в данном столбце имеют общее значение тега col-id:
Мой slab-grid.component.css файл содержит инструкции по размерамдля самой сетки и спецификатора шрифта:
.slab-grid {
width: 45vw;
height: 80vh;
font-family: monospace;
}
Я знаю, что они применяются правильно, потому что если я удаляю определение размера, сетка становится 1px на 1px, а если я удаляю font-family, всясетка возвращается к обычному шрифту, как показано ниже.Столбец «Thk» не изменяется обратно, потому что другая сетка в другой части приложения имеет тот же col-id, а всеобъемлющий styles.css файл содержит определение для [col-id="thk"]:
Таким образом, в моем понимании, если бы я добавил следующее утверждение к slab-grid.component.css
[col-id="yard_seq"] {
text-align: right;
}
Я ожидаю, что увижу столбец Yard Seq, в котором col-id="yard_seq" станет правильнымвыровнены.На самом деле, когда я добавляю это утверждение к slab-grid.component.css, ничего не меняется.Однако, если я перейду к первичному файлу CSS для проекта, расположенного в src/styles.css, и добавлю то же утверждение, я получу следующий результат:
Вопрос:
- Почему мой CSS не всегда применяется к соответствующему компоненту, если он помещен в
src/<component-name>/<component-name>.component.css?
ИЛИ
- Есть ли способ заставить элементы
src/styles.css применяться к странице только при визуализации определенных компонентов?
Решение:
Я нашел приемлемое решение этой проблемы.Если я изменю свои собственные селекторы стилей /src из [col-id="thk"], чтобы использовать селектор потомков .slab-grid [col-id="thk"], тогда я смогу сделать так, чтобы мои стили переопределяли конфликтующие с помощью !important без редактирования конфликтующих файлов.