如何在SideBarButton激活状态下更改SVG图标颜色？

首先明确：你现在用<img>标签引入SVG的方式没法直接改颜色——外部SVG文件被img封装后，CSS无法穿透修改内部元素样式。得先把SVG改成inline内嵌形式或者React组件形式，再配合激活状态控制颜色。

步骤1：替换img为可控制的SVG形式 #

把原来用img引入的SVG换成下面两种方式之一：

方式A：将SVG转为React组件 #

用工具（比如Create React App自带的svgr，或者在线转换工具）把SVG文件转成React组件，直接导入使用：

// 导入转好的SVG组件
import DashboardIcon from './icons/DashboardIcon.svg';
import PatientIcon from './icons/PatientIcon.svg';
import VisitsIcon from './icons/VisitsIcon.svg';
import AppointmentsIcon from './icons/AppointmentsIcon.svg';

const makeButtons = [
  { icon: <DashboardIcon />, title: "Dashboard" },
  { icon: <PatientIcon />, title: "Patients" },
  { icon: <VisitsIcon />, title: "Appointments" },
  { icon: <AppointmentsIcon />, title: "Visits" },
];

方式B：直接内嵌SVG代码 #

把SVG的代码直接写进makeButtons里，记得给fill设为currentColor（让SVG继承父元素的文字颜色）：

const makeButtons = [
  { 
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
        {/* 粘贴你的Dashboard SVG的path代码 */}
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
      </svg>
    ), 
    title: "Dashboard" 
  },
  // 其他按钮依此替换
];

步骤2：修改SideBarButton组件和样式 #

现在SVG已经嵌入DOM，就可以通过isActive状态控制颜色，两种实现方法任选：

方法1：用CSS父类控制 #

给激活的按钮加active类，通过CSS选择器修改图标颜色：

先给SideBarButton里的图标加类名：

const SideBarButton = ({ onClick, icon, title, isActive }) => {
  return (
    <li>
      <ButtonSidebar onClick={onClick} className={isActive ? "active" : ""}>
        <span className="sidebar-icon">{icon}</span>
        {title}
      </ButtonSidebar>
    </li>
  );
};

然后写CSS：

/* 正常状态图标颜色 */
.sidebar-icon {
  color: #888; /* 自定义默认色 */
}

/* 激活状态图标颜色 */
.ButtonSidebar.active .sidebar-icon {
  color: #165DFF; /* 自定义激活色 */
}

/* 强制SVG继承父元素颜色 */
.sidebar-icon svg {
  fill: currentColor;
}

方法2：直接给图标加条件样式 #

用内联样式直接控制，适合不需要复杂CSS的场景：

const SideBarButton = ({ onClick, icon, title, isActive }) => {
  const iconStyle = {
    color: isActive ? "#165DFF" : "#888"
  };

  return (
    <li>
      <ButtonSidebar onClick={onClick}>
        <span style={iconStyle}>{icon}</span>
        {title}
      </ButtonSidebar>
    </li>
  );
};

同样要确保SVG的fill属性为currentColor。

关键提醒 #

• 必须让SVG的fill设为currentColor，否则无法继承父元素的颜色值。
• 绝对不能用<img>标签引入SVG，外部资源无法被CSS穿透修改内部元素。

内容的提问来源于stack exchange，提问作者Retarded Dev