Tengo los siguientes dos archivos scss y estoy tratando de cambiar un atributo que se establece cuando importo un componente ya creado. El primer archivo es el css que estoy cambiando, y el segundo es el css del que estoy extrayendo. No puedo cambiar el segundo archivo sin estropear el componente ya construido, pero parece que no puedo descifrar cómo modificar este atributo...

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

 .imported-button { width: 300px; .imported-button-color { color: red; } }

Descubrí cómo cambiar el ancho a través del primer bloque de código que mostré arriba, pero ¿cómo cambiaría el color de rojo a azul, por ejemplo? He intentado...

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

... pero eso no cambia nada para mí. ¡Agradezco la ayuda!

Editar: el Javascript que se utiliza está estructurado como...

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

donde el componente Button tiene los atributos css en la clase .imported-button