2

Intento eliminar un box-shadow de una clase "predeterminada" llamada 'sketch-picker' y estoy fracasando en el intento. La clase viene por default con el componente color-sketch, le agregue 2 botones pero me quedan separadas por una linea que se elimina quitando la propiedad 'box-shadow'. Estoy tratando de eliminarlo pero no lo estoy consiguiendo:

EDITADO: Mas especificamente, esta tomando la clase pero no aplica el 'box-shadow' por que interpreta que tiene mas "jerarquia" la clase 'sketch-picker'.

CSS:

::ng-deep {
    .box .sketch-picker{
        box-shadow: none;
    } 
}

HTML:

<color-sketch class="box"
  [color]="color"
  (onChange)="changeComplete($event)"
></color-sketch>
<div class="color-picker-buttons">
  <ion-button (click)="close()" color="medium" size="small"> {{ 'UTILS.SKIP' | translate }} </ion-button>
  <ion-button (click)="save()" color="primary" size="small"> {{ 'UTILS.SAVE' | translate }} </ion-button>
</div>

CAPTURAS: introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Resuelto: Se agrego !important despues de la propiedad en la clase css. introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

2
  • 1
    Prueba con !important atras de none Commented el 1 abr. 2022 a las 14:48
  • Perfecto @HernánGarcia, era eso! Gracias.
    – BCBB
    Commented el 1 abr. 2022 a las 15:01

1 respuesta 1

2

Solucionado! El css quedo asi:

::ng-deep {
    .box .sketch-picker{
        box-shadow: none !important;
    } 
}

La regla !important en CSS se utiliza para añadir más importancia a una propiedad/valor de lo normal.

De hecho, si utiliza la regla !important, anulará TODAS las reglas de estilo anteriores para esa propiedad específica en ese elemento.

De esta manera logre desactivar esa regla de estilo del componente en ese caso particular.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.