css - React: How to style child element that depends on parent on Styled-Components

Question

I've inserted a doughnut chart using FusionCharts but appears a link below the chart that i would like to remove. I've found the css to do it but on styled-components i tryed using this css and its not working.

the css:

svg > g[class^="raphael-group-"] > text{
   display: none;
}

my styled-component:

const svg = styled.svg`

`;

const g = styled.g.attrs({
  className: 'raphael-group-'
})``;

const text = styled.text`

`;

 export const Body = styled.body`

    ${svg} > ${g} > ${text}  {
       display: none;
    }

 `;

Here is the svg element:

How is the right way to do it?

question from:https://stackoverflow.com/questions/65921053/react-how-to-style-child-element-that-depends-on-parent-on-styled-components

Answer 1

Waitting for answers