Angular использует переменную CSS в глобальном стиле.файл CSS

Angular использует переменную CSS в глобальном стиле.файл CSS

15.11.2018 11:53:32 Просмотров 11 Источник

Как использовать переменную CSS в глобальном файле CSS

Просто проверь стиль.css файл в stackblitz

https://stackblitz.com/edit/angular-themeing-y3jwrk?file=src/styles.css

У вопроса есть решение - Посмотреть?

Ответы - Angular использует переменную CSS в глобальном стиле.файл CSS / Angular use CSS variable in global style.css file

Henry

26.12.2018 08:36:59

в глобальном файле css-стили.css, у меня есть этот код:

import ...

:root {
    --main-color: #3f51b5;
}

он объявляет переменную css, " main-color"

затем в файле CSS дочернего компонента я могу использовать эту переменную напрямую

#component-body {
  background: var(--main-color);
}
Himanshu Arora

28.04.2019 04:55:56

В глобальном стиле.css-файл, определите пользовательские свойства в селекторе :root.

Глобальные переменные в CSS позволят нам определить переменные темы таким образом, чтобы несколько компонентов могли использовать одно и то же.

Здесь вы идете:

приложение / стиль.CSS

:root {
  --primary-color: #fff;
  --background-color: #e5e5e5;
  --text-color: #2d2d2d;
}

Чтобы определить пользовательское свойство CSS, префиксируйте его двумя '--', например --text-color:#2d2d2d.

Теперь мы можем ссылаться на переменную в других CSS files.To используйте пользовательское свойство, используйте ключевое слово var для передачи ссылки на пользовательское свойство.

заголовок приложения//.компонент.CSS

:host {
background-color: var(--primary-color);
color: var(--text-color);
}
Закрыть X