Flowbite React: как избавиться от этой надоедливой границы? ⇐ CSS

[Anonymous]

Я использую Flowbite React, в dit есть много замечательных элементов, но многие интерактивные компоненты при нажатии получают эту действительно раздражающую рамку. Как от этого избавиться? В результате красивый компонент становится уродливым, и я не могу понять, как его изменить.

В этом примере я пытаюсь использовать вкладки. Глядя на тему внизу страницы, я вижу, что граница возникает из свойства «кольцо», для которого установлено значение focus:ring-4 focus:ring-cyan-300. Я попытался установить имя класса моих элементов следующим образом: className="ring-0 focus:ring-0 focus:ring-transparent", но ничего не переопределяется, и кольцо все равно отображается.

Это весь мой компонент:

"использовать клиент"; импортировать {вкладки} из "flowbite-реагировать"; импортировать {BsFillGrid3X2GapFill, BsFan} из 'react-icons/bs' импортировать {HiSignal} из "реагировать-значки/hi2"; экспортировать функцию по умолчанию ConfigurationDeckTabs({ onTabChange, }: { onTabChange: (вкладка: число) => void; }) { возвращаться ( ); }