Не могу изменить активный цвет текста в компоненте TabsItem

[Rezetchik]

Вопрос по поводу css.module активной кнопки TabsItem. Хочу поменять стандартный белый активный цвет на кастомный. Пробовал достучаться до него через классы .vkuiTabsItem--selected.vkuiTabsItem--mode-accent .vkuiTabsItem__label разным способом, но что-то так и не выходит. При чём, если меняю свойство на background-color, то всё замечательно работает, как только меняю на color, то активная кнопка меняет свой цвет на стандартный белый, но если же кнопка не активна, то цвет меняется. Все скрины прилагаю ниже. Подскажите, как в css достучаться до цвета активной кнопки TabsItem?

<TabsItem selected={selected === 'all_the_time'} onClick={() => setSelected('all_the_time')} id="tab-all_the_time" aria-controls="tab-content-all_the_time" className={selected === 'all_the_time' ? 'TabsText' : ''}> За всё время </TabsItem>

:global { .TabsText { .vkuiTabsItem__label { color: aqua; } } }

[SevereCloud]

Внутренняя реализация компонентов, включая их классы — не публичное API VKUI и может измениться в любой момент без предупреждения. Не привязывайтесь к ней, если хотите сохранить возможность без проблем обновляться на новые версии библиотеки.

Проблема скорее всего в специфичности:

• За неактивный цвет отвечает селектор .vkuiTabsItem__label, который имеет специфичность 1.
• За активный цвет отвечает селектор .vkuiTabsItem--selected .vkuiTabsItem__label, который имеет специфичность 2.
• Селектор .TabsText .vkuiTabsItem__label имеет специфичность 2.

При одинаковой специфичности применяется тот стиль, который находится ниже других. Как вариант можно поменять порядок подключения css или увеличить специфичность.

[SevereCloud]

Где я могу найти публичные API-компоненты ? Как их использовать? Или это и есть те самые свойства и методы компонентов, которые прописаны в https://vkcom.github.io/VKUI/ ?

Верно, свойства и методы компонентов это публичное API

Прошу рассказать, поподробнее, что значит "на свой страх и риск" про нарушение инкапсуляции. Возможно ли такое, что если я не буду обновлять библиотеку в своём кейсе до полной реализации, деплоита и публикации мини-приложения, то у меня ничего не "слетит". Или же если ваша библиотека обновится до новой версии, то оно внесёт свои изменения в уже опубликованное мини-приложение?

Библиотека сама не обновится

Какие последствия грозят нарушения инкапсуляции, привязываясь к классам, учитывая, что в разработке фронта мини-приложения буду участвовать только я и допустим заранее буду знать о проблемах, которые могут возникнуть из-за нарушения инкапсуляции?

Нарушение инкапсуляции грозит тем, что когда вы обновите VKUI, код может перестать работать:

• например у селектора повысится специфичность
• поменяется структура компонента
• переименнуется класс
• и т.д.

Warning

У завязки на классы есть еще одна особенность, сборщики не могут гарантировать правильный порядок стилей.

Существуют ли какие-то нетривиальные подходы использования компонентов? Например, можно ли полностью подключить компонент со всеми его свойствами и стилями, и их уже видоизменять локально? Или же вся структура компонентов находятся в закрытом доступе?

Структура компонентов это реализация.

На примере данной проблемы (активный цвет текста в компонентах TabsItem), не могли бы вы мне объяснить, как не нарушать инкапсуляцию?

.colorThis {
  color: aqua;
}

<TabsItem>
  <span className="colorThis">Text</span>
</TabsItem>

[Rezetchik]

Спасибо, за ваш ответ! Но остался ещё один вопрос, при таком коде, при переключении между TabsItem, кнопка на пол секунды из color aqua становится белой, а потом уже серой. И получается не совсем красиво :( Пытался найти состояния, отвечающее за "уход" с кнопки, но так и не получилось добиться результата.

Например, при переключение с "Все вкладки" на "Только мои", текст сначала выделяется белым, а потом серым. Нужно именно убрать этот полусекундный белый цвет состояния "ухода с кнопки", или заменять на тот цвет, который мне хочется...

<TabsItem> <span className={selected === 'Только мои' ? 'colorThis' : ' '}> Text </span> </TabsItem> <TabsItem> <span className={selected === 'Все вкладки' ? 'colorThis' : ' '}> Text </span> </TabsItem>

.colorThis { color: aqua; }

[Rezetchik]

[SevereCloud]

.selectColor {
  color: aqua;
}
.unselectColor {
  color: var(--vkui--color_text_secondary);
}

<TabsItem>
  <span className={selected ? 'selectColor' : 'unselectColor'}> Text </span> 
</TabsItem>