Angular 5 Custom CSS

Question

Привет, ребята, так что я изо всех сил пытаюсь выяснить, как добавить пользовательские стили к элементам для разных страниц. Если я добавлю стили в глобальный CSS, это будет работать.Например, я использую ui-carousel на трех разных страницах, и мне нужно, чтобы они выглядели по-разному на каждой, так что в этом случае глобальный вариант не будет работать для меня. Если я добавлю div в свои индивидуальные css-страницы, он будет работать нормально, так как я могу назвать класс.

<h3 style="margin-left: 20px;">Fotos</h3>
<p-carousel numVisible="4"
        [value]="_photos">
            <ng-template let-p pTemplate="p">
                <p>
                    <img style="    width: 100%;
                    padding: 4px;
                    /* margin: auto; */
                    border: 1px solid #ddd;"
                         [src]="p.photo">
                </p>
            </ng-template>
   </p-carousel>

Любая помощь приветствуется

Answer 1

Давайте сначала разберемся с вашим запросом -

Вы хотите изменить стиль CSS элемента или компонента в разных местах.

Для этого вам доступны следующие опции -

@Input inline css

Если у вас есть всего несколько свойств, которые вы хотите обновить, вы можете выбрать встроенный css.

@Input Class Style

Если у вас есть набортем, которые вы хотите применить к компоненту, тогда вы можете выбрать опцию CSS Class как @Input

Есть еще несколько дополнительных опций, таких как Dynamic Template, но я не думаю, что вам это нужно.

Перезаписать CSS

Чтобы перезаписать CSS, вы можете использовать :host или :host ::ng-deep

Примеры:

:host >>> .ui-dropdown-item {...}

или

:host ::ng-deep .ui-dropdown-item {...}

Здесь вы можете увидеть демонстрацию в действии - https://stackblitz.com/edit/angular-wz8iq4

Answer 2

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

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

p-carousel { <some css styling>; }

Мне кажется, эта статья ссылка тоже очень хорошо объясняет.

Answer 3

См. Эту ссылку Применение стиля CSS к дочерним элементам

Возможным решением будет применение настраиваемого имени класса к каждому экземпляру в оболочке div или к самому элементу.Вам также может понадобиться применить :: ng-deep, но в конечном итоге вам понадобится какой-то идентификатор, чтобы сделать их уникальными 1: 1 для CSS, который вы хотите применить.

<p-carousel class="classInstance1 " numVisible="4"

p-carousel.classInstance1 .ui-carousel { 
    position: relative !important; 
    padding: 0.683rem !important; 
    border: none !important; 
    background: white !important; 
} 

p-carousel.classInstance2 .ui-carousel { 
    position: relative !important; 
    padding: 0.683rem !important; 
    border: none !important; 
    background: green !important; 
} 

Answer 4

Вы можете иметь таблицу стилей, соответствующую каждому компоненту, который вы создаете.Укажите, какую таблицу стилей вы хотите использовать для компонента при объявлении компонента: например, @Component ({selector: 'your-component-selector', templateUrl: './your-component.html', styleUrls: ['./your-component.css ']})

Вы можете иметь несколько таблиц стилей для компонента, используя массив styleUrls.

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