Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

64
Vistas
How to override nested css class attributes?

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

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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

7 months 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 empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.