• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

149
Vistas
¿Cómo anular los atributos de clase css anidados?

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

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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" } })
  • primera condición
 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

  • segunda condición
 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

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda