Как поменять цвет Tabs из библиотеки garden React JS?

Здраствуйте, на моем сайте есть синие табсы из библиотеки garden(https://garden.zendesk.com/components/tabs#tabpanel). Как я могу поменять их цвет допустим на черный (по умолчанию стоит синий) ? Пробовал поменять с помощью className и style JSX:

import React, { useState } from 'react';
import { Tabs, TabList, Tab, TabPanel } from '@zendeskgarden/react-tabs';
import './fd.css'

const Garden = () => {
  const [selectedTab, setSelectedTab] = useState('tab-1');

  return (
    <Tabs selectedItem={selectedTab} onChange={setSelectedTab}>
      <TabList className="tabs-element">
        <Tab item="tab-1">Elm</Tab>
        <Tab item="tab-2">Sugar Maple</Tab>
        <Tab item="tab-3">Dogwood</Tab>
      </TabList>
      <TabPanel item="tab-1">
        Elms are deciduous and semi-deciduous trees comprising the flowering plant genus Ulmus in
        the plant family Ulmaceae.
      </TabPanel>
      <TabPanel item="tab-2">
        The sugar maple is one of America’s most-loved trees. In fact, more states have claimed it
        as their state tree than any other single species—for New York, West Virginia, Wisconsin,
        and Vermont, the maple tree stands alone.
      </TabPanel>
      <TabPanel item="tab-3">
        Cornus is a genus of about 30–60 species of woody plants in the family Cornaceae, commonly
        known as dogwoods, which can generally be distinguished by their blossoms, berries, and
        distinctive bark.
      </TabPanel>
    </Tabs>
  );
};

export default Garden;

CSS:

.tabs-element {
    color: black
}

Ответы (1 шт):

Автор решения: Slavik

введите сюда описание изображения

Конкретно в этом случае проблема в том, что стили из библиотеки перекрывают заданный стиль для класса tabs-elements

В css в таких случаях можно использовать свойство !important, которое дает наивысший приоритет прописанному стилю:

.tabs-element {
   color: red !important;
}

Стоит предупредить, что использование !important должно быть крайней и нежелательной мерой. В данном случае, когда необходимо перекрыть стиль библиотеки, это еще допустимо, но в своем коде, когда можно переписать селектор или добавить классов элементу в html прибегать к использованию !important не стоит вообще.

Также рекомендую к освоению dev tools в браузерах.

→ Ссылка