我正在使用 MaterialUI中的<SvgIcon>组件来生成React标签。我希望能够在选项卡处于活动状态时将填充颜色从#999更改为#F09D09。这是我所拥有的：
function DeltaIconInactive(props) {
return (
<SvgIcon {...props}>
<g id="Polygon_1" data-name="Polygon 1" fill="#999">
<path d="M 18.17290878295898 15.53000354766846 L 5.667888641357422 15.53000354766846 C 5.12441873550415 15.53000354766846 4.868758678436279 15.15782356262207 4.784058570861816 14.99781322479248 C 4.699368476867676 14.83780288696289 4.535368919372559 14.4171028137207 4.840958595275879 13.96769332885742 L 11.09346866607666 4.772823333740234 C 11.35243892669678 4.391993045806885 11.72271823883057 4.335133075714111 11.9203987121582 4.335133075714111 C 12.11807918548584 4.335133075714111 12.48835849761963 4.391993045806885 12.74732875823975 4.772823333740234 L 18.99983787536621 13.96769332885742 C 19.30542945861816 14.4171028137207 19.14142799377441 14.83780288696289 19.05673789978027 14.99781322479248 C 18.97203826904297 15.15782356262207 18.71637916564941 15.53000354766846 18.17290878295898 15.53000354766846 Z" stroke="none"/>
<path d="M 11.92040348052979 7.113511085510254 L 7.55718994140625 13.53000259399414 L 16.28360939025879 13.53000259399414 L 11.92040348052979 7.113511085510254 M 11.9203987121582 2.335132598876953 C 12.8631591796875 2.335132598876953 13.80591869354248 2.772823333740234 14.40117835998535 3.648202896118164 L 20.65368843078613 12.84307289123535 C 22.00804901123047 14.83478355407715 20.58147811889648 17.53000259399414 18.17290878295898 17.53000259399414 L 5.667888641357422 17.53000259399414 C 3.259319305419922 17.53000259399414 1.832748413085938 14.83478355407715 3.187108993530273 12.84307289123535 L 9.439619064331055 3.648202896118164 C 10.03487873077393 2.772823333740234 10.97763824462891 2.335132598876953 11.9203987121582 2.335132598876953 Z" stroke="none" fill="#999"/>
</g>
</SvgIcon>
);
}
function TerminationsIconInactive(props) {
return (
<SvgIcon {...props}>
<path id="Path_2" data-name="Path 2" d="M46.553,93.363a1.428,1.428,0,0,0,0,2l.919.919a3.326,3.326,0,0,1-.487.033H37.311a2.709,2.709,0,0,1-2.955-2.866c0-2.5.587-6.341,3.829-6.341a.643.643,0,0,1,.432.188,5.289,5.289,0,0,0,7.061,0,.645.645,0,0,1,.432-.188,3.042,3.042,0,0,1,.631.066,1.5,1.5,0,0,0-.6,1.174,1.421,1.421,0,0,0,.409,1.006l2,2Zm-8.655-9.8a4.25,4.25,0,1,1,4.25,4.25A4.252,4.252,0,0,1,37.9,83.567ZM56.823,94.115a.349.349,0,0,1,.1.254.343.343,0,0,1-.1.244l-1.505,1.506a.344.344,0,0,1-.243.1.352.352,0,0,1-.255-.1l-2.756-2.756-2.756,2.756a.352.352,0,0,1-.254.1.345.345,0,0,1-.244-.1l-1.5-1.506a.342.342,0,0,1-.1-.244.348.348,0,0,1,.1-.254l2.756-2.756L47.306,88.6a.348.348,0,0,1-.1-.254.342.342,0,0,1,.1-.244l1.5-1.506a.345.345,0,0,1,.244-.1.352.352,0,0,1,.254.1l2.756,2.756L54.82,86.6a.352.352,0,0,1,.255-.1.344.344,0,0,1,.243.1l1.505,1.506a.343.343,0,0,1,.1.244.349.349,0,0,1-.1.254L54.068,91.36Z" transform="translate(-34.356 -79.317)" fill="#999"/>
</SvgIcon>
);
}
function LicensingIconInactive(props) {
return (
<SvgIcon {...props}>
<g id="My_Account_My_Profile_copy" data-name="My Account / My Profile copy" transform="translate(-32.5 -67.5)">
<path id="Path_9" data-name="Path 9" d="M60.861,67.5H34.737A2.236,2.236,0,0,0,32.5,69.737V85.593a2.236,2.236,0,0,0,2.237,2.237H60.861A2.236,2.236,0,0,0,63.1,85.593V69.737A2.236,2.236,0,0,0,60.861,67.5Zm-14.9,16.609a19.74,19.74,0,0,1-4.9.574,22.022,22.022,0,0,1-5.071-.574,1,1,0,0,1-.939-1,5.962,5.962,0,0,1,2.487-4.82,4.061,4.061,0,1,1,6.692-.128A5.918,5.918,0,0,1,46.9,83.111,1,1,0,0,1,45.964,84.109Zm15.527-1.516c0,.256-.319.462-.71.462H48.133c-.393,0-.712-.206-.712-.462V81.506c0-.254.319-.462.712-.462H60.781c.392,0,.71.207.71.462Zm0-3.519c0,.255-.319.462-.71.462H48.133c-.393,0-.712-.207-.712-.462V77.988c0-.255.319-.462.712-.462H60.781c.392,0,.71.207.71.462Zm0-3.519c0,.256-.319.463-.71.463H48.133c-.393,0-.712-.207-.712-.463V74.469c0-.256.319-.461.712-.461H60.781c.392,0,.71.205.71.461Z" transform="translate(0 0)" fill="#999"/>
</g>
</SvgIcon>
);
}
function TrainingIconInactive(props) {
return (
<SvgIcon {...props}>
<g id="Group_4" data-name="Group 4" transform="translate(-32 -46.916)">
<path id="Path_3" data-name="Path 3" d="M154.057,355.789a1,1,0,0,0,.881-.528l2-3.742,2,3.741a1,1,0,1,0,1.761-.942l-2.984-5.544h-1.554l-2.982,5.544a1,1,0,0,0,.41,1.352,1.009,1.009,0,0,0,.47.119Z" transform="translate(-113.755 -283.649)" fill="#999"/>
<g id="Group_3" data-name="Group 3" transform="translate(32 46.916)">
<path id="Path_4" data-name="Path 4" d="M353.612,52.144a2.614,2.614,0,1,1,2.614-2.614A2.613,2.613,0,0,1,353.612,52.144Z" transform="translate(-331.758 -46.916)" fill="#999"/>
<g id="Group_2" data-name="Group 2" transform="translate(4.169 6.298)">
<path id="Path_5" data-name="Path 5" d="M247.131,151.659a.346.346,0,0,0-.344-.344h-2.2a.346.346,0,0,0-.344.344v1.249l2.89-.947Z" transform="translate(-235.607 -151.315)" fill="#999"/>
<path id="Path_6" data-name="Path 6" d="M113.635,200.474v.552a.347.347,0,0,1-.347.344H101.461a.344.344,0,0,1-.344-.344v-.552a.344.344,0,0,1,.344-.344h.646v-3.468a.347.347,0,0,1,.344-.347h2.2a.348.348,0,0,1,.347.347v3.468h.929v-5.3a.346.346,0,0,1,.344-.344h2.2a1.342,1.342,0,0,0-.955,1.653,1.546,1.546,0,0,0,1.3,1.195v2.8h.932V197.3l2.89-.471v3.3h.646A.347.347,0,0,1,113.635,200.474Z" transform="translate(-101.117 -191.882)" fill="#999"/>
<path id="Path_7" data-name="Path 7" d="M237.908,161.68a1.76,1.76,0,0,1-1.763,1.76v8.219h-2.439l-.948-7.186-1.085,7.186h-2.439V156.482l-2.633.429-2.89.471H223.7a.935.935,0,0,1-.292.052,1.027,1.027,0,0,1-1.013-1.02,1.031,1.031,0,0,1,1.013-1.016l.305-.1,2.89-.948,4.666-1.529,1.49,4.611,1.354-4.611,2.377.848a2.144,2.144,0,0,1,1.416,2.1C237.9,157.449,237.908,161.68,237.908,161.68Z" transform="translate(-215.077 -152.731)" fill="#999"/>
</g>
<path id="Path_8" data-name="Path 8" d="M32.745,90.257H49.412c-.012.132-.021.265-.021.4a4.445,4.445,0,0,0,.4,1.831h-14.7V104.9H48.477v1.851H33.963a.724.724,0,0,1-.722-.722V92.488h-.5A.748.748,0,0,1,32,91.744V91A.747.747,0,0,1,32.745,90.257Z" transform="translate(-32 -87.643)" fill="#999"/>
</g>
</g>
</SvgIcon>
);
}
function GLRIconInactive(props) {
return (
<SvgIcon {...props}>
<g id="Layer_429" data-name="Layer 429" transform="translate(-45.007 -39.5)">
<path id="Path_10" data-name="Path 10" d="M63.137,43.618a1.23,1.23,0,1,0-.36.875A1.191,1.191,0,0,0,63.137,43.618Zm2.882-3.706a14.373,14.373,0,0,1-.972,5.54,14.73,14.73,0,0,1-3.262,4.639q-1.042,1.029-2.509,2.265l-.257,4.877a.47.47,0,0,1-.206.335l-4.941,2.882a.408.408,0,0,1-.206.051.462.462,0,0,1-.3-.116l-.824-.824a.409.409,0,0,1-.1-.412L53.538,55.6l-3.616-3.616-3.551,1.094a.391.391,0,0,1-.116.013.4.4,0,0,1-.3-.116l-.824-.824a.39.39,0,0,1-.064-.5l2.882-4.941a.47.47,0,0,1,.335-.206l4.877-.257q1.235-1.467,2.265-2.509a15,15,0,0,1,4.607-3.32,14.491,14.491,0,0,1,5.546-.914.433.433,0,0,1,.309.122A.386.386,0,0,1,66.019,39.912Z" fill="#999"/>
</g>
</SvgIcon>
);
}
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
<Box p={3}>{children}</Box>
</Typography>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`
};
}
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
backgroundColor: "#F8F7F0"
},
appBar: {
backgroundColor: "#1D2127"
},
indicator: {
backgroundColor: '#F09D09',
},
}));
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
function handleChange(event, newValue) {
setValue(newValue);
}
return (
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
classes={{ indicator: classes.indicator }}
textColor="primary"
centered
value={value}
onChange={handleChange}
aria-label="simple tabs example"
>
<Tab label="Roster" icon={<RestoreIcon />} {...a11yProps(0)} />
<Tab label="Delta" icon={<DeltaIconInactive />} {...a11yProps(0)} />
<Tab label="Terminations" icon={<TerminationsIconInactive />} {...a11yProps(0)} />
<Tab label="Licensing" icon={<LicensingIconInactive />} {...a11yProps(0)} />
<Tab label="Training" icon={<TrainingIconInactive />} {...a11yProps(0)} />
<Tab label="GLR" icon={<GLRIconInactive />} {...a11yProps(0)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<Roster />
</TabPanel>
<TabPanel value={value} index={1}>
<Delta />
</TabPanel>
<TabPanel value={value} index={2}>
Terminations
</TabPanel>
<TabPanel value={value} index={3}>
Licensing
</TabPanel>
<TabPanel value={value} index={4}>
Training
</TabPanel>
<TabPanel value={value} index={5}>
GLR
</TabPanel>
</div>
);
}
我该怎么做？