Я хочу создать компонент и предоставить определенные свойства, которые могут быть переопределены родительскими элементами.
Вот пример. Допустим, я создаю кнопку, которая имеет свои собственные цвета, но позволяет изменить цвет фона, если определено --button-bg-color:
.my-button {
--bg-color: blue;
/* lots of other css... */
/**
* here I assume that there might be a --button-bg-color defined,
* but I have a fallback to my own --bg-color variable
*/
background-color: var(--button-bg-color, var(--bg-color));
}
Проблема с приведенным выше кодом заключается в том, что ссылка на переменную --button-bg-color находится где-то глубоко в стиле.
Что я хотел бы сделать, так это объявить где-нибудь наверху, что я могу захотеть использовать эту переменную. Это скажет мне, что этот компонент ожидает переопределения.
Может быть, что-то вроде этого?
.my-button {
--button-bg-color: undefined; /* is there something like undefined? */
--bg-color: blue;
/* the rest of the code is the same */
}
