В странице авторизации KeyCloack как можно добавить свои css/scss стили на React?

Question

[laravel_creative_3103]

После того, как сбросил все стили на странице авторизации KeyCloack, нужно добавить свои стили, но к сожалению ничего не выходит. С разных источников говорится о том, что нужно использовать расширение файла для страницы авторизации .ftl, а также настроить theme.properties. После настройки, также ничего не вышло, можете подсказать как корректно настроить стили авторизации для KeyCloack?

Comments

[Zephyroche]

Читал документацию?

[laravel_creative_3103]

Zephyroche, читал, делал по документации, не помогло

Answer 1

[Алексей Денисов]

Насколько помню. В теме рядом со страницей в формате .ftl кладётся файл theme.properties. В нём параметр styles, где указывается путь к стилям css в папке resources, которая находится в той же теме.
Также в параметрах указываются значения-ссылки на стили, типа переменных. Эти переменные можно будет использовать в файле .ftl для применения стиля.
Содержание theme.properties типа:

parent=base
styles=css/login.css

kcHeaderClass=header__logo
kcLabelClass=label

Тогда в css файле login.css, который лежит по пути resources/css/login.css описываем все эти стили:

.header__logo {
  ...
}

.label {
  ...
}

И в шаблоне login.ftl используем:

...
<div class="${properties.kcHeaderClass!}"><img .../></div>
<form>
  <label class="${properties.kcLabelClass!}">...</label>
</form>
...