Настраиваемый цвет AntD для активной вкладки без css / less,

#reactjs #tabs #antd

#reactjs #вкладки #antd

Вопрос:

Я пытаюсь изменить цвет фона для активной вкладки с вкладок AntD, я могу добиться этого с меньшим количеством файлов, ориентируясь:

 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: blue;
}

так что это не проблема, моя проблема в том, что мне нужно изменить цвет фона активной вкладки на основе условия javascript, и я не уверен, как настроить таргетинг на активную вкладку с помощью javascript и без css / less.

Есть идеи, как я могу этого добиться?

Ответ №1:

Вы можете получить элемент, используя функцию querySelector(https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector ).

  const Demo = () => {
    function callback(key) {
    updateTabBackground();
  }

  useEffect(()=> {
   updateTabBackground();
  }, []);

  const updateTabBackground = () => {
    const tab = document.querySelector('[role="tab"][aria-selected="true"]');
    console.log(tab)

    if(tab) {
      tab.style.background = 'red';
    }
  }
        
  return (
      <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="Tab 1" key="1">
            Content of Tab Pane 1
          </TabPane>
          <TabPane tab="Tab 2" key="2">
            Content of Tab Pane 2
          </TabPane>
          <TabPane tab="Tab 3" key="3">
            Content of Tab Pane 3
          </TabPane>
      </Tabs>)
          
    };

1. Спасибо за ваш ответ, я пытался последовать вашему примеру, но кажется, что постоянная вкладка равна нулю (I консоль. вкладка журнала, и я получил null).

2. Где вы тестируете этот пример?

3. Еще раз спасибо, это работает не так, как должно, оно изменяет цвет фона содержимого вкладки, а не всей вкладки, а также изменяет ранее выбранную вкладку, а не текущую, я привел пример в code sendbox: codesandbox.io/s/priceless-northcutt-nibhq?file=/src/App.js

4. Я обновил код здесь codesandbox.io/s/compassionate-frost-i6k07?file=/src/App.js

5. Просто добавьте TabItem.classList.add(data[i].срочно amp;amp; «ant-tab-срочно»); внутри цикла for, codesandbox.io/s/elated-pond-0lkwf?file=/src/App.js

Ответ №2:

Если вы действительно не хотите использовать css / less, вы можете просто использовать встроенные стили:

 let style = {};

if (condition) style.color = 'red';

return <Component style={style} />

Но вы также можете сделать это (на мой взгляд, немного более чисто), добавив класс на основе условия в JavaScript и обработав стиль в css / less:

 let class;

if (condition) class = 'specialClass';

return <Component className={class} />

1. Спасибо за ваш ответ, я знаю об этом подходе, но я все еще не уверен, как настроить таргетинг на активную вкладку только с помощью JS, поэтому в вашем примере вы настраиваете таргетинг на компонент, но мне нужно настроить таргетинг на активную вкладку.

Ответ №3:

Вы также можете попробовать использовать некоторую переменную css для обновления активного цвета из кода js.

 const element = document.documentElement;
if (element) {
    element.style.setProperty('--active_tab_color', 'red'); // Use Dynamic color variable here.
}

а затем перейдите в свой файл css и используйте там эту переменную.

 .ant-tabs .ant-tabs-nav-list .ant-tabs-ink-bar  {
    background-color: var(--active_tab_color);
}