How to override nested css class attributes

Question

I have the following two scss files, and I'm trying to change an attribute that is set when I import an already built component. The first file is the css I'm changing, and the second is the css I'm pulling from. I can't change the second file without messing up the component already built, but I can't seem to figure out how to modify this one attribute...

.button-edit {
   
   .imported-button {
      width: 200px;
   }
}

.imported-button {
   width: 300px;

   .imported-button-color {
      color: red;
   }
}

I have figured out how to change the width through the first code block I've shown above, but how would I change the color from red to blue, for example? I've tried...

.button-edit {
   
   .imported-button {
      width: 200px;

      .imported-button-color {
         color: blue;
      }
   }
}

... but that doesn't change anything for me. Appreciate the help!

Edit: The Javascript being used is structured like...

<Button className='button-edit'>
   <div>
      <p>Press here</p>
   </div>
</Button>

where the Button component has the css attributes in the .imported-button class