Javascript 使用MakeStyles更改SVG填充颜色：如何使用选择器在SVG文件中选择特定ID？

假设我们有以下代码：

SVG文件内容：

<g transform="translate(...)" fill="#FFFFFF" id="Circle">

       <path ........ ></path>

</g>



<g transform="translate(...)" fill="#FFFFFF" id="Circle">

        <path ........ ></path>

</g>


<g transform="translate(...)" fill="#FFFFFF" id="Circle">

       <path ........ ></path>

</g>

反应组分：

import {ReactSVG} from 'react-svg';
const useStyles = makeStyles(theme => ({
    svg: {
        '& svg g#Circle path': {
            fill: '#fff'
        }
    }
}));

const Logo = () => {
    const classes = useStyles();
    return => {
     <ReactSVG src={SVG_URL} className={classes.svg}/>


     ...

     }
}

从'react svg'导入{ReactSVG}；
const useStyles=makeStyles（主题=>({
svg：{
“&svg g#圆路径”：{
填充：“#fff”
}
}
}));
const Logo=（）=>{
const classes=useStyles（）；
返回=>{
...
}
}

上面我们有一个SVG文件内容和一个React组件，用于更改填充颜色

我成功地改变了颜色，但有点太多了，因为它也改变了SVG中我不想改变的部分

如何更改MakeStyles以仅选择第一个和第二个

g

标记（共有3个，我想使用材质UI MakeStyles仅更改第一个

2

。

您应该尝试

：而不是（：最后一个孩子）

选择器：

const useStyles = makeStyles(theme => ({
    svg: {
        '& svg g#Circle:not(:last-child) path': {
            fill: '#fff'
        }
    }
}));

---

您可以添加一个最小的代码沙盒吗？您是否多次使用相同的

id=“Circle”

。@enxaneta:是的，我不能将它们更改为不同的名称，我只能使用前两个

Circle

标记，这里需要更改：

“&svg g#Circle path”

。如果您有多个相同的id值，则文件无效。坏的和意想不到的事情会发生。这些不好的和意想不到的事情可能会因浏览器而异。几乎完美的谢谢，但我仍然想渲染最后一个孩子，只是不想用白色填充。是否可以渲染最后一个儿子而不填充它？它不应该影响最后一个孩子，没有示例无法猜测