Question

我正在尝试从AntD标签中更改活动标签的背景颜色，我可以通过定位 less 文件来实现这一目标，

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

所以这不是问题，我的问题是我需要根据javascript条件更改活动标签的背景颜色，并且我不确定如何在没有CSS / less的情况下使用javascript和定位活动标签。

有什么想法可以实现吗？

Answer 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>)
          
    };

Answer 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} />

AntD自定义颜色，用于不带CSS /少的活动标签，

2 个答案: