1

Здраствуйте, на моем сайте есть синие табсы из библиотеки 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
}
3
  • Следует указать пример кода с описанной проблемой, в идеале чтобы другие еще смогли запустить и воспроизвести проблему.
    – Slavik
    Commented 1 нояб. 2021 в 13:00
  • @Slavik я добавил пример кода, с помощью className я создал класс и в отдельном файле CSS прописал изменение цвета, но он не работает
    – DAS
    Commented 1 нояб. 2021 в 20:15
  • Сейчас у меня нет времени запускать код и смотреть самому, могу лишь порекомендовать то, что делал бы я: открыть dev tools, смотреть появился ли класс в html, в нужном ли он месте и если так, то дальше инспектировать (также в dev tools смотреть) его стили.
    – Slavik
    Commented 1 нояб. 2021 в 20:42

1 ответ 1

1

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

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

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

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

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

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

1
  • Спасибо, очень помог
    – DAS
    Commented 2 нояб. 2021 в 9:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.