Te damos la respuesta a esta traba, o por lo menos eso esperamos. Si sigues con dudas coméntalo, que sin dudarlo te responderemos
Solución:
combinador descendiente perforador de sombras (obsoleto)
Puedes usar ::ng-deep en la definición de CSS del componente respectivo para forzar su estilo hacia abajo a través del árbol de componentes secundarios en todas las vistas de componentes secundarios, por ejemplo:
/* two.component.css */
::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected)
border-color:darkblue;
Clases CSS personalizadas
Alternativamente, puede asignar diferentes clases de CSS para cada Selector de fechas, que luego puede diseñar usando style.css. La API @angular/material/datepicker proporciona dos entradas en mat-datepicker para ese propósito:
clasepanel Clases que se pasarán al panel selector de fechas. Admite la misma sintaxis que ngClass
clase de fecha Función que se puede usar para agregar clases de CSS personalizadas a las fechas
Usando esto, su plantilla OneComponent ahora podría verse así:
y el estilo correspondiente en style.css así:
.datepickerOne .mat-calendar-body-today:not(.mat-calendar-body-selected)
border-color: darkgreen;
Si opta por la solución de clase CSS personalizada, le sugiero que cree un segundo archivo CSS dentro de su carpeta de componentes con solo los estilos personalizados de su selector de fechas e importe ese en su style.css para mantener todo organizado.
he creado un apilar para que compruebes las posibilidades mencionadas.
Una mejor arquitectura sería crear un datepicker.scss presentar en assets/scss carpeta con su SCSS personalizado. Y la importación dentro de los componentes que desea tener el estilo personalizado de selector de fecha.
@import "src/assets/scss/datepicker.scss";
De esta manera, puede agregar complejidad a sus diseños en una implementación fácil.
Puede aprovechar el selector ng-deep. Ha quedado en desuso durante mucho tiempo, pero aún no ha sido reemplazado por ningún grupo de trabajo de CSS. Muchos desarrolladores todavía lo usan, ya que las formas alternativas también tienen sus propios inconvenientes.
Dentro del archivo css de su componente puede tener algo como esto:
::ng-deep yourcomponent
//custom css
Te mostramos las comentarios y valoraciones de los lectores
Te invitamos a apoyar nuestro ensayo fijando un comentario o dejando una puntuación te lo agradecemos.