CSS y Custom Properties de los componentes de Ionic

Huy por fin aprendí como utilizar los css q están al final de la explicación de los componentes jajajaajja, la buena pa ti profe.

Detalles que hacen la diferencia!

En React el CSS lo he modificado:

ion-slide>ion-icon.close {
    float: right;
    color: var(--ion-color-primary);
    font-size: 48px;
}

Porque la importación y llamado de los iconos es diferente y no se puede usar el selector de atributos ^-^

import {
  play,
  close
} from 'ionicons/icons';

<IonIcon icon={close} class="close"></IonIcon>

Interesante como unos signos hacen la diferencia en la presentación del app

Un truco que he usado para crear mas colores de los que tiene por default variables.css es dentro del bloque :root duplico la estructura del color cambiando los hexadecimales por los valores personalizados que me da el color generator y al final le coloco la etiqueta de mi color para crear la variable

/** Custom colors **/

    --ion-color-botonblue: #158BD4;
    --ion-color-botonblue-rgb: 21,139,212;
    --ion-color-botonblue-contrast: #ffffff;
    --ion-color-botonblue-contrast-rgb: 255,255,255;
    --ion-color-botonblue-shade: #127abb;
    --ion-color-botonblue-tint: #2c97d8;

Luego, después de que cierra el bloque de :root, creo una clase con el mismo nombre de la variable y coloco los diferentes estilos usando mis variables personalizadas:

.ion-color-botonblue{
  --ion-color-base: var(--ion-color-botonblue) !important;
  --ion-color-base-rgb: var(--ion-color-botonblue-rgb) !important;
  --ion-color-contrast: var(--ion-color-botonblue-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-botonblue-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-botonblue-shade) !important;
  --ion-color-tint: var(--ion-color-botonblue-tint) !important;
}

De esta forma ya puedo usar el color directamente en el atributo “color” de un componente ejemplo:

<ion-button color="botonblue">Primary</ion-button>

La ventaja es que ya tiene todas las variaciones que se necesita, como el contraste.

Ionic usa SASS por defecto (no debería), puedes ver el curso https://platzi.com/cursos/sass/

Yo centre mi imagen de esta manera.
ion-slide > img {
max-height: 50%;
max-width: 60%;
margin: 60px 0;
margin-left: 50px;
margin-right: auto;
//display:block;

}

Messirve.

Excelente clases, aun que si se utiliza scss, se podria crear una hoja con variables, que tan conveniente seria?