Property condition in CSS class

Question

I use a private library component in my project. This component is image upload and I need to remove the event from a button using the CSS but it is not possible to modify this button by code. Then I want to know if I can make a condition for that property pointer-events: none; is activated only when imageSaved === true

The class I need to modify is #root > main > div > div._N6x88CfaOH.css-17chh14 > div:nth-child(4) > button

Something I’d like to do would be like:

if( imageSaved === true ){
  #root > main > div > div._N6x88CfaOH.css-17chh14 > div:nth-child(4) > button{
    pointer-events: none;
  }
}

But obviously it doesn’t work that way, it’s just to get an idea of my goal

Code of the component:

  <File
    name="image"
    label="Upload de imagens"
    onChange={handleChange}
    required={true}
    multiple={true}
    accept="image/png, image/jpeg"
  >
    {items.map((item, index) => (
      <File.Item {...item} key={index} />
    ))}
  </File>

component image:

that button in yellow, is what I want to remove the event when imageSaved === true