Javascript 尝试将“活动”类样式传递给作为prop-to-button元素传递的嵌套SVG

我有一个正在构建的菜单/选项卡组件，我将其设置为接收SVG和文本字符串的组合作为标题属性，以便显示为选项卡名称

我遇到的问题是，我有一个活动类，它将活动选项卡文本涂成蓝色，而SVG则保持黑色

所需的行为：将活动类CSS样式应用于文本和SVG元素，以便它们在活动时均为蓝色，在不活动时均为黑色

当前行为：活动类样式应用于文本，但不应用于SVG。当tab处于活动状态时，文本变为蓝色，而SVG保持黑色

下面是一个代码沙盒，演示了该问题：

我的当前选项卡组件：

// @ts-nocheck
import React, { useState } from 'react';
import styled from '../../styles/styled';

type Props = {
  children: React.ReactNode;
};

export const Tabs = (props: Props) => {
  const { children } = props;
  const [tab, setTab] = useState(0);
  const childrenList = React.Children.toArray(children);

  const tabs = childrenList.map((child, idx) => {
    const title = (child as any).props.title ?? idx;
    return (
      <StyledTabs key={title} className={tab === idx ? 'activeTab' : ''} onClick={() => setTab(idx)}>
        {title}
      </StyledTabs>
    );
  });

  const current = childrenList[tab];

  return (
    <div>
      <div>{tabs}</div>
      <div>{current}</div>
    </div>
  );
};

const StyledTabs = styled.button`
  margin: 0 10px;
  padding: 0 10px;
  padding-bottom: 5px;
  border: none;
  background: transparent;
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;

  &.activeTab {
    color: #1471da;
    border-bottom: 1px solid #1471da;
    outline: none;
    padding-bottom: 5px;
  }
`;

使用选项卡组件的页面：

  const OverviewIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35">
      <path d="M0 0h16v16H0zM19 0h16v16H19zM0 19h16v16H0zM19 19h16v16H19z" />
    </svg>
  );

  const OverviewTab = () => (
    <>
      <OverviewIcon />
      <span>OVERVIEW</span>
    </>
  );

...

<Tabs>
 <div title={<OverviewTab />}>
  <ContentSection></ContentSection>    
 </div>
 <div title={'ADDITIONAL CONTACTS'}>
   <h1>CONTACTS</h1>
 </div>
</Tabs>

---

要更改svg颜色，请在SCS中使用fill：

  &.activeTab {
    color: #1471da;
    fill: #1471da;
    border-bottom: 1px solid #1471da;
    outline: none;
    padding-bottom: 5px;
  }

---

更改按钮内部文本的颜色与更改SVG元素的颜色是不同的。就我个人而言，我可能会以不同的方式重写它，这样您就可以传递某种布尔值来表示某个对象是否处于活动状态。现在，一个解决方案是添加填充：1471da；转到&.activeTab选择器。fill将以SVG为目标，color将以按钮内的文本为目标。这是否回答了您的问题？是的！非常感谢。这是样式化组件，而不是scss。样式化组件在内部使用scss语法：scss的一些功能已经移植到样式化组件，但我在文档或您共享的博客文章中找不到任何地方说样式化组件在内部使用scss。我们使用的预处理器，Styles，支持类似于scss的自动嵌套样式语法。。好吧，在这个答案的背景下，我认为这其实并不重要。这不是纯粹的SCS，但基本的都在那里