Как заставить применение стилей для компонента https://github.com/mariohmol/ang-jsoneditor в моем угловом приложении

Question

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

Я пробовал следующее:

• style.css:

  • добавление '@import "~ jsoneditor / dist / jsoneditor.min.css";'
  • добавление '@import url ("~ jsoneditor / dist / jsoneditor.min.css";)'
  • вставка таблицы стилей и связанных активов

• component-parent.scss:

  • с добавлением @import ~jsoneditor / dist / jsoneditor.min.css "; '
  • добавление' @import url (" ~ jsoneditor / dist / jsoneditor.min.css ";) '
  • , встраивающее таблица стилей и связанные с ней активы

Я также настроил демонстрационный проект, в котором пользовательский интерфейс правильно отображает, и сравнил его стилизацию с тем же компонентом в моем приложении и подтвердилОтсутствие стиля является основной причиной проблемы.Ниже приведены изображения пользовательского интерфейса и код ошибки css:

Пользовательский интерфейс без стиля CSS без стиля

Шаги, чтобы получить рабочий пример анг-jsoneditor на вашем локальном хосте:

1. git clone https://github.com/mariohmol/ang-jsoneditor.git
2. npm run start
3. перейти к "http://localhost:4200"

4. Откройте ваши devtools, выделите компонент редактора json и увидите на панели стилей стили jsonedior, такие как:

   div.jsoneditor-menu>button.jsoneditor-expand-all {
       background-position: 0 -120
   }
   

Я ожидал, что если я локально применил стиль в parent-component.scss, что это будет применено. Из-за многомодульной природы проекта есть четкая вероятность того, что все шаги, выполненные ранее, были выполнены частично по ошибке из-за неизвестных соглашений. С учетом сказанного, если бы это было так, яожидал бы, по крайней мере, увидеть стили цвета, когда таблица стилей была добавлена ​​в parent-componentenet.scss. По этой причине я считаю, что именно мое незнание прецедентных проблем css вызывает эту проблему.

** Обновление **

Итак, я прочитал эту ссылку о переопределении стиля дочернего углового компонента , который помог мне понять, что дочерние компоненты полностью инкапсулированы по умолчанию, поэтому мои локальные изменения в родительском компонентеКомпонент не повлияет на ребенка без использования стиля пирсинга или ng-deep.Это указывает на то, что существует проблема с модулем или как регистрируются активы модуля ang-json-editor.Я провел тестирование с использованием ng-deep, и это произвело эффект изменения компонента, но мне пришлось бы обновить всю таблицу стилей линии 2000, чтобы это не было приемлемым решением.

Answer 1

Основная причина отсутствия css и его последующего исправления неизвестна, однако я смог реализовать обходной путь, основанный на предложении Джоэла Джозефа, взломав инкапсуляцию ang-jsoneditors и затем стилизовав компонент в файле scss родителя.

Ниже приведены шаги:

1. В parent-component.ts:

   а. Импортируйте модуль ViewEncapsulation: "import {ViewEncapsulation, ...} из '@ angular / core';"

   б. Установите для ViewEncapsulation значение None:

   @Component({
       selector: 'parent',
       templateUrl: './parent.component.html',
       styleUrls: ['./parent.component.scss'],
       encapsulation: ViewEncapsulation.None
   })
   

2. Добавьте свой CSS к компоненту:

   а. Добавьте свой CSS. Для этого случая просто скопируйте и вставьте его из источника .

3. Добавьте свои активы в проект:

   а. В этом случае создайте папку с именем «img», которая находится на том же уровне, что и parent.component.scss

   б. Скопируйте значок svg icon в папку img.

Это решило мои проблемы со стилем как временное исправление. Я буду обновлять постоянным решением, если / когда оно будет реализовано.