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

Question

假设我们有以下代码：

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


     ...

     }
}

上面有一个SVG文件内容和一个可更改填充颜色的React组件。

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

我们如何更改MakeStyles以仅选择第一个和第二个g标签（有3个，我想使用Material UI MakeStyles仅更改第一个2标签。

Answer 1

您应尝试使用:not(:last-child)选择器：