Change SVG fill color using MakeStyles : how to choose specific IDs in SVG file using Selectors?

Question

Suppose we have the following code :

SVG File contents :

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

React component :

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


     ...

     }
}

Above we have an SVG file contents and a React component that changes the fill color.

I'm successfully changing the color , but a little bit too much , since it's also changes parts in the SVG that I don't want to change.

How can we change the MakeStyles to choose only the first & second g tags (there are 3 , I want to change only the first 2 using Material UI MakeStyles).

Answer 1

You should try :not(:last-child) selector:

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