如何覆盖嵌套的 css class 属性？

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

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

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

Answer 1

First, you have an error in your code, why did you write className in the html code?

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

you should just write class

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

Second, you have a problem arranging the elements within the scss code, as you want the blue color to activate when its parent class is deleted? How do you want this to be done? This command cannot be implemented because you are asking the language to break its programming to implement your goal

To solve this problem, you have to remove the blue color class from inside the dev whose class you want to delete, so that it becomes as follows

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

Now we come to JavaScript:

1- We make variables that carry the father div and p

let checkDiv  = document.querySelector(".button-edit div")

let checkDivP = document.querySelector(".button-edit div p")

2- We make a function on the button so that it contains two conditions

document.querySelector(".button-edit").addEventListener("click",function(){
  
  if( checkDiv.className === "" )
    {
      checkDiv.className = "imported-button";
      
      checkDivP.className = ""
    }
  
  else
    {
      checkDiv.className = "";
      
      checkDivP.className = "imported-button-color"
    }
})

• first condition

if( checkDiv.className === "" )
{
  checkDiv.className = "imported-button";

  checkDivP.className = ""
}

If the class is empty, add the width class and delete the color class

• second condition

else
{
  checkDiv.className = "";
      
  checkDivP.className = "imported-button-color"
}

If the width class exists, delete it and add the color class

The final result / https://codepen.io/emozlove/pen/JjpjmQR