В нижней части документа Styling есть раздел о том, как использовать переменные CSS:
В этом примере мы определили переменную CSS с именем --app-primary-color, котораяустановлен цвет #488aff.Селектор :root в этом примере является псевдоселектором CSS, который определяет переменную в корневом элементе вашего проекта (обычно <html>), чтобы эту переменную можно было использовать в вашем приложении.
Поэтому, если у вас есть такой компонент кнопки:
@Component({ tag: 'my-button', styleUrl: 'button.css' })
export class Button {
render() {
return <div class="button"><slot /></div>;
}
}
и следующий button.css для него:
.button {
background: var(--primary-color, tomato);
color: var(--light-color, white);
display: block;
padding: 1em 2em;
border-radius: 0.2em;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
}
Тогда вы можете перезаписать все цвета кнопок, установив переменную где-то вваш CSS:
:root {
--primary-color: mediumseagreen;
}
Переменные CSS также можно установить с помощью Javascript, и они даже заполняются Stencil для старых браузеров.
Пример JSFiddle: http://jsfiddle.net/5fv9r6e1/
Кстати, в вашем компонентном декораторе вы также можете установить shadow: true для включения Shadow DOM, а затем вы можете использовать селектор :host, и в этом примере вам не нужен div-элемент для переноса:
@Component({ tag: 'my-button', styleUrl: 'button.css', shadow: true })
export class Button {
render() {
return <slot />;
}
}
css:
:host {
background: var(--primary-color, tomato);
color: var(--light-color, white);
display: block;
padding: 1em 2em;
border-radius: 0.2em;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
}
Ionic 4 часто использует эту концепцию, поэтому, возможно, стоит взглянуть на их компоненты трафарета: https://github.com/ionic-team/ionic/tree/master/core/src/components