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...
<BoxButton className='button-edit'> <div> <p>Press here</p> </div> </BoxButton> donde el componente Button tiene los atributos css en la clase .imported-button
Primero, tiene un error en su código, ¿por qué escribió className en el código html?
<Button className='button-edit'> <div> <p>Press here</p> </div> </Button>deberías escribir clase
<Button class='button-edit'> <div> <p>Press here</p> </div> </Button>En segundo lugar, tiene un problema al organizar los elementos dentro del código scss, ya que desea que el color azul se active cuando se elimine su clase principal. ¿Cómo quieres que se haga esto? Este comando no se puede implementar porque le está pidiendo al lenguaje que rompa su programación para implementar su objetivo
Para resolver este problema, debe eliminar la clase de color azul del interior del desarrollador cuya clase desea eliminar, para que quede de la siguiente manera
.button-edit { .imported-button { width: 200px; } .imported-button-color { color: blue; } }Ahora llegamos a JavaScript:
1- Hacemos variables que llevan el padre div y p
let checkDiv = document.querySelector(".button-edit div") let checkDivP = document.querySelector(".button-edit div p")2- Hacemos una función sobre el botón para que contenga dos condiciones
document.querySelector(".button-edit").addEventListener("click",function(){ if( checkDiv.className === "" ) { checkDiv.className = "imported-button"; checkDivP.className = "" } else { checkDiv.className = ""; checkDivP.className = "imported-button-color" } }) if( checkDiv.className === "" ) { checkDiv.className = "imported-button"; checkDivP.className = "" }Si la clase está vacía, agregue la clase de ancho y elimine la clase de color
else { checkDiv.className = ""; checkDivP.className = "imported-button-color" }Si existe la clase de ancho, elimínela y agregue la clase de color
El resultado final / https://codepen.io/emozlove/pen/JjpjmQR